diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx index beeb8bfaff..ffb2f687c9 100644 --- a/docs/docs/guides/02-theming.mdx +++ b/docs/docs/guides/02-theming.mdx @@ -227,31 +227,26 @@ export default function Main() { ### Sync dynamic colors with system colors -Using [`pchmn/expo-material3-theme`](https://github.com/pchmn/expo-material3-theme) library you can easily access the Material 3 system colors from Android 12+ devices and seamlessly integrate them into your dynamic theme. Any changes made by the user to the system colors will be automatically reflected in the theme. +React Native Paper provides built-in support for Android dynamic colors through `DynamicLightTheme` and `DynamicDarkTheme`. These themes use React Native's `PlatformColor` API to map all Material Design 3 color roles to Android system colors, so any changes the user makes to their system palette are automatically reflected in the app. :::info -In case of incompatible devices, the library will revert to a default theme. +Dynamic colors require Android 12 (API 31+). On older Android versions and all other platforms, these themes fall back to the default `LightTheme` / `DarkTheme`. ::: -To get started, follow the [installation instructions](https://github.com/pchmn/expo-material3-theme#installation) and check the following code: - ```tsx -import { useMaterial3Theme } from '@pchmn/expo-material3-theme'; import { useColorScheme } from 'react-native'; -import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper'; +import { + DynamicDarkTheme, + DynamicLightTheme, + PaperProvider, +} from 'react-native-paper'; import App from './src/App'; export default function Main() { - const colorScheme = useColorScheme(); - const { theme } = useMaterial3Theme(); - - const paperTheme = - colorScheme === 'dark' - ? { ...MD3DarkTheme, colors: theme.dark } - : { ...MD3LightTheme, colors: theme.light }; + const isDarkMode = useColorScheme() === 'dark'; return ( - + ); diff --git a/docs/docs/guides/06-recommended-libraries.md b/docs/docs/guides/06-recommended-libraries.md index e70157ca1d..7be319cedf 100644 --- a/docs/docs/guides/06-recommended-libraries.md +++ b/docs/docs/guides/06-recommended-libraries.md @@ -33,8 +33,4 @@ Material Design themed [date picker](https://material.io/components/date-pickers ## Time Picker [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates) -Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) - -## System Colors -[pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme) -Retrieve Material 3 system colors from Android 12+ devices \ No newline at end of file +Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) diff --git a/example/package.json b/example/package.json index 667c56cb19..3ae36fb1ec 100644 --- a/example/package.json +++ b/example/package.json @@ -16,7 +16,6 @@ "dependencies": { "@expo/vector-icons": "^15.0.2", "@expo/webpack-config": "~19.0.1", - "@pchmn/expo-material3-theme": "^1.3.2", "@react-native-async-storage/async-storage": "2.2.0", "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/bottom-tabs": "^7.3.10", diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 2a31565f67..8bcee32967 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -16,7 +16,7 @@ import { Portal, } from 'react-native-paper'; -import { deviceColorsSupported, isWeb } from '../utils'; +import { dynamicThemeSupported, isWeb } from '../utils'; import { useExampleTheme } from './hooks/useExampleTheme'; import { PreferencesContext } from './PreferencesContext'; @@ -103,7 +103,7 @@ function DrawerItems() { if (!preferences) throw new Error('PreferencesContext not provided'); const { - toggleShouldUseDeviceColors, + toggleShouldUseDynamicTheme, toggleTheme, toggleRtl: toggleRTL, toggleCollapsed, @@ -114,7 +114,7 @@ function DrawerItems() { collapsed, rtl: isRTL, theme: { dark: isDarkTheme }, - shouldUseDeviceColors, + shouldUseDynamicTheme, } = preferences; const _handleToggleRTL = () => { @@ -181,12 +181,12 @@ function DrawerItems() { - {deviceColorsSupported && isV3 ? ( - - - Use device colors * + {dynamicThemeSupported ? ( + + + Use Dynamic Theme - + diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index a5b1042ea5..f70294e67e 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -186,7 +186,7 @@ const AppbarExample = ({ navigation }: Props) => { height: height + bottom, }, { - backgroundColor: theme.colors.elevation.level2, + backgroundColor: theme.colors.surfaceContainerHigh, }, ]} safeAreaInsets={{ bottom, left, right }} diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx index 0cff916980..8052c90647 100644 --- a/example/src/Examples/FABExample.tsx +++ b/example/src/Examples/FABExample.tsx @@ -117,14 +117,6 @@ const FABExample = () => { onPress={() => {}} visible={visible} /> - {}} - visible={visible} - disabled - /> void; toggleCustomFont: () => void; toggleRippleEffect: () => void; - toggleShouldUseDeviceColors?: () => void; + toggleShouldUseDynamicTheme?: () => void; theme: MD3Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; rippleEffectEnabled: boolean; - shouldUseDeviceColors?: boolean; + shouldUseDynamicTheme?: boolean; } | null>(null); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 6ca9b27077..821386cc83 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { I18nManager } from 'react-native'; -import { useMaterial3Theme } from '@pchmn/expo-material3-theme'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; @@ -9,13 +8,19 @@ import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; import { StatusBar } from 'expo-status-bar'; import * as Updates from 'expo-updates'; -import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; +import { + PaperProvider, + MD3DarkTheme, + MD3LightTheme, + DynamicLightTheme, + DynamicDarkTheme, +} from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; import { PreferencesContext } from './PreferencesContext'; import App from './RootNavigator'; -import { deviceColorsSupported } from '../utils'; +import { dynamicThemeSupported } from '../utils'; import { CombinedDefaultTheme, CombinedDarkTheme, @@ -40,7 +45,7 @@ export default function PaperExample() { InitialState | undefined >(); - const [shouldUseDeviceColors, setShouldUseDeviceColors] = + const [shouldUseDynamicTheme, setShouldUseDynamicTheme] = React.useState(true); const [isDarkMode, setIsDarkMode] = React.useState(false); const [rtl, setRtl] = React.useState( @@ -50,19 +55,13 @@ export default function PaperExample() { const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); - const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { - if (!deviceColorsSupported || !shouldUseDeviceColors) { - return isDarkMode ? MD3DarkTheme : MD3LightTheme; + if (dynamicThemeSupported && shouldUseDynamicTheme) { + return isDarkMode ? DynamicDarkTheme : DynamicLightTheme; } - return isDarkMode - ? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, ...mdTheme.dark } } - : { - ...MD3LightTheme, - colors: { ...MD3LightTheme.colors, ...mdTheme.light }, - }; - }, [isDarkMode, mdTheme, shouldUseDeviceColors]); + return isDarkMode ? MD3DarkTheme : MD3LightTheme; + }, [isDarkMode, shouldUseDynamicTheme]); React.useEffect(() => { const restoreState = async () => { @@ -129,8 +128,8 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ - toggleShouldUseDeviceColors: () => - setShouldUseDeviceColors((oldValue) => !oldValue), + toggleShouldUseDynamicTheme: () => + setShouldUseDynamicTheme((oldValue) => !oldValue), toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), toggleRtl: () => setRtl((rtl) => !rtl), toggleCollapsed: () => setCollapsed(!collapsed), @@ -141,14 +140,14 @@ export default function PaperExample() { collapsed, rtl, theme, - shouldUseDeviceColors, + shouldUseDynamicTheme: shouldUseDynamicTheme, }), [ rtl, theme, collapsed, customFontLoaded, - shouldUseDeviceColors, + shouldUseDynamicTheme, rippleEffectEnabled, ] ); @@ -199,7 +198,7 @@ export default function PaperExample() { ); }} - + diff --git a/example/src/index.tsx b/example/src/index.tsx index 4395d2d55e..a6ee5ccc08 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -111,9 +111,9 @@ export default function PaperExample() { rippleEffectEnabled, // noop for web, specified to avoid type errors toggleRtl: noop, - toggleShouldUseDeviceColors: noop, + toggleShouldUseDynamicTheme: noop, rtl: false, - shouldUseDeviceColors: false, + shouldUseDynamicTheme: false, }), [theme, collapsed, customFontLoaded, rippleEffectEnabled] ); diff --git a/example/utils/index.ts b/example/utils/index.ts index f86f3a0307..d0856f19a5 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -1,6 +1,5 @@ import { Platform } from 'react-native'; -import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule'; import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'; type ReducerAction = { @@ -1420,7 +1419,5 @@ export const restaurantsData = [ }, ]; -export const deviceColorsSupported = - Boolean(ExpoMaterial3ThemeModule) && - Platform.OS === 'android' && - Platform.Version >= 31; +export const dynamicThemeSupported = + Platform.OS === 'android' && (Platform.Version as number) >= 31; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index 4934ef7bf6..707f5c15c2 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -110,7 +110,7 @@ export type Props = Omit< * styles.bottom, * { * height: BOTTOM_APPBAR_HEIGHT + bottom, - * backgroundColor: theme.colors.elevation.level2, + * backgroundColor: theme.colors.surfaceContainer, * }, * ]} * safeAreaInsets={{ bottom }} diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index fbf4fe438e..893326dead 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -33,7 +33,7 @@ export const getAppbarBackgroundColor = ( } if (elevated) { - return colors.elevation.level2; + return colors.surfaceContainer; } return colors.surface; diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 3d315aea70..066f42a201 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -450,7 +450,7 @@ const BottomNavigationBar = ({ backgroundColor?: ColorValue; }; - const backgroundColor = customBackground || colors.elevation.level2; + const backgroundColor = customBackground || colors.surfaceContainer; const activeTintColor = getActiveTintColor({ activeColor, diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 516ff915f7..9f0b3a98dc 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -274,15 +274,21 @@ const Button = ( const borderRadius = 5 * roundness; const iconSize = 18; - const { backgroundColor, borderColor, textColor, borderWidth } = - getButtonColors({ - customButtonColor, - customTextColor, - theme, - mode, - disabled, - dark, - }); + const { + backgroundColor, + borderColor, + textColor, + textOpacity, + borderWidth, + backgroundOpacity, + } = getButtonColors({ + customButtonColor, + customTextColor, + theme, + mode, + disabled, + dark, + }); const touchableStyle = { ...borderRadiusStyles, @@ -290,7 +296,7 @@ const Button = ( }; const buttonStyle = { - backgroundColor, + backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor, borderColor, borderWidth, ...touchableStyle, @@ -337,6 +343,19 @@ const Button = ( elevation={elevation} container > + {backgroundOpacity < 1 && ( + + )} - + {icon && loading !== true ? ( { - const { colors } = theme as MD3Theme; - if (disabled && isMode('outlined')) { - return colors.surfaceDisabled; - } - +const getButtonBorderColor = ({ isMode, theme }: BaseProps) => { if (isMode('outlined')) { - return colors.outline; + return theme.colors.outlineVariant; } return 'transparent'; @@ -179,15 +170,24 @@ export const getButtonColors = ({ dark, }); - const borderColor = getButtonBorderColor({ isMode, theme, disabled }); + const borderColor = getButtonBorderColor({ isMode, theme }); const borderWidth = getButtonBorderWidth({ isMode, theme }); + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundOpacity = + disabled && !isMode('outlined') && !isMode('text') + ? stateOpacity.pressed + : stateOpacity.enabled; + return { backgroundColor, borderColor, textColor, + textOpacity, borderWidth, + backgroundOpacity, }; }; diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx index 642602b0fa..a4e6fb0c23 100644 --- a/src/components/Checkbox/CheckboxAndroid.tsx +++ b/src/components/Checkbox/CheckboxAndroid.tsx @@ -99,7 +99,7 @@ const CheckboxAndroid = ({ const checked = status === 'checked'; const indeterminate = status === 'indeterminate'; - const { rippleColor, selectionControlColor } = + const { selectionControlColor, selectionControlOpacity } = getAndroidSelectionControlColor({ theme, disabled, @@ -123,7 +123,6 @@ const CheckboxAndroid = ({ - + { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - - return color(checkedColor).fade(0.32).rgb().string(); -}; - const getAndroidControlColor = ({ theme, checked, @@ -60,7 +45,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (checked) { @@ -87,8 +72,11 @@ export const getAndroidSelectionControlColor = ({ theme, customUncheckedColor, }); + const selectionControlOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { - rippleColor: getAndroidRippleColor({ theme, checkedColor, disabled }), selectionControlColor: getAndroidControlColor({ theme, disabled, @@ -96,6 +84,7 @@ export const getAndroidSelectionControlColor = ({ checkedColor, uncheckedColor, }), + selectionControlOpacity, }; }; @@ -109,7 +98,7 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.primary; } if (customColor) { @@ -119,21 +108,6 @@ const getIOSCheckedColor = ({ return theme.colors.primary; }; -const getIOSRippleColor = ({ - theme, - checkedColor, - disabled, -}: { - theme: InternalTheme; - checkedColor: string; - disabled?: boolean; -}) => { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(checkedColor).fade(0.32).rgb().string(); -}; - export const getSelectionControlIOSColor = ({ theme, disabled, @@ -144,12 +118,12 @@ export const getSelectionControlIOSColor = ({ customColor?: string; }) => { const checkedColor = getIOSCheckedColor({ theme, disabled, customColor }); + const checkedColorOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { checkedColor, - rippleColor: getIOSRippleColor({ - theme, - checkedColor, - disabled, - }), + checkedColorOpacity, }; }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 012cac4fc1..2c79e8201d 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -196,7 +196,6 @@ const Chip = ({ theme: themeOverrides, testID = 'chip', selectedColor, - showSelectedOverlay = false, showSelectedCheck = true, ellipsizeMode, compact, @@ -257,13 +256,13 @@ const Chip = ({ borderColor, textColor, iconColor, + contentOpacity, selectedBackgroundColor, backgroundColor, } = getChipColors({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, }); @@ -324,7 +323,14 @@ const Chip = ({ theme={theme} hitSlop={hitSlop} > - + {avatar && !icon ? ( theme as MD3Theme; +const { stateOpacity } = tokens.md.ref; + export type ChipAvatarProps = { style?: StyleProp; }; @@ -21,7 +24,6 @@ const getBorderColor = ({ isOutlined, disabled, selectedColor, - backgroundColor: _backgroundColor, }: BaseProps & { backgroundColor: string; selectedColor?: string }) => { const isSelectedColor = selectedColor !== undefined; const { colors } = md3(theme); @@ -32,14 +34,14 @@ const getBorderColor = ({ } if (disabled) { - return color(colors.onSurfaceVariant).alpha(0.12).rgb().string(); + return colors.surfaceContainer; } if (isSelectedColor) { return color(selectedColor).alpha(0.29).rgb().string(); } - return colors.outline; + return colors.outlineVariant; }; const getTextColor = ({ @@ -53,7 +55,7 @@ const getTextColor = ({ const isSelectedColor = selectedColor !== undefined; const { colors } = md3(theme); if (disabled) { - return colors.onSurfaceDisabled; + return colors.onSurface; } if (isSelectedColor) { @@ -96,7 +98,7 @@ const getBackgroundColor = ({ if (isOutlined) { return 'transparent'; } - return color(colors.onSurfaceVariant).alpha(0.12).rgb().string(); + return colors.surfaceContainerLow; } return getDefaultBackgroundColor({ theme, isOutlined }); @@ -107,43 +109,15 @@ const getSelectedBackgroundColor = ({ isOutlined, disabled, customBackgroundColor, - showSelectedOverlay, }: BaseProps & { customBackgroundColor?: ColorValue; - showSelectedOverlay?: boolean; }) => { - const { colors } = md3(theme); - const backgroundColor = getBackgroundColor({ + return getBackgroundColor({ theme, disabled, isOutlined, customBackgroundColor, }); - - if (isOutlined) { - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(colors.onSurfaceVariant), 0.12) - .rgb() - .string(); - } - return color(backgroundColor) - .mix(color(colors.onSurfaceVariant), 0) - .rgb() - .string(); - } - - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(colors.onSecondaryContainer), 0.12) - .rgb() - .string(); - } - - return color(backgroundColor) - .mix(color(colors.onSecondaryContainer), 0) - .rgb() - .string(); }; const getIconColor = ({ @@ -157,7 +131,7 @@ const getIconColor = ({ const isSelectedColor = selectedColor !== undefined; const { colors } = md3(theme); if (disabled) { - return colors.onSurfaceDisabled; + return colors.onSurface; } if (isSelectedColor) { @@ -175,13 +149,11 @@ export const getChipColors = ({ isOutlined, theme, selectedColor, - showSelectedOverlay, customBackgroundColor, disabled, }: BaseProps & { customBackgroundColor?: ColorValue; disabled?: boolean; - showSelectedOverlay?: boolean; selectedColor?: string; }) => { const baseChipColorProps = { theme, isOutlined, disabled }; @@ -194,9 +166,12 @@ export const getChipColors = ({ const selectedBackgroundColor = getSelectedBackgroundColor({ ...baseChipColorProps, customBackgroundColor, - showSelectedOverlay, }); + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { borderColor: getBorderColor({ ...baseChipColorProps, @@ -211,6 +186,7 @@ export const getChipColors = ({ ...baseChipColorProps, selectedColor, }), + contentOpacity, backgroundColor, selectedBackgroundColor, }; diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index 6e2612973e..6a3fc52b3d 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -7,7 +7,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -286,7 +285,7 @@ const DataTablePagination = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color(theme.colors.onSurface).alpha(0.6).rgb().string(); + const labelColor = theme.colors.onSurfaceVariant; return ( { const { right, left } = useSafeAreaInsets(); const theme = useInternalTheme(themeOverrides); - const { roundness, colors } = theme as MD3Theme; + const { roundness } = theme as MD3Theme; const borderRadius = 7 * roundness; - const backgroundColor = colors.elevation.level3; + const backgroundColor = theme.colors.surfaceContainerHigh; return ( , 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -206,7 +202,6 @@ const AnimatedFAB = ({ accessibilityLabel = label, accessibilityState, color: customColor, - disabled, onPress, onLongPress, delayLongPress, @@ -300,7 +295,6 @@ const AnimatedFAB = ({ const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, }); @@ -359,15 +353,12 @@ const AnimatedFAB = ({ ...font, }; - const md3Elevation = disabled || !isIOS ? 0 : 3; + const md3Elevation = !isIOS ? 0 : 3; const shadowStyle = styles.v3Shadow; - const baseStyle = [ - StyleSheet.absoluteFill, - disabled ? styles.disabled : shadowStyle, - ]; + const baseStyle = [StyleSheet.absoluteFill, shadowStyle]; - const newAccessibilityState = { ...accessibilityState, disabled }; + const newAccessibilityState = { ...accessibilityState }; return ( , 'mode'> & { * Custom color for the icon and label of the `FAB`. */ color?: string; - /** - * Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch. - */ - disabled?: boolean; /** * Whether `FAB` is currently visible. */ @@ -184,7 +180,6 @@ const FAB = forwardRef( accessibilityState, animated = true, color: customColor, - disabled, onPress, onLongPress, delayLongPress, @@ -239,7 +234,6 @@ const FAB = forwardRef( const { backgroundColor, foregroundColor } = getFABColors({ theme, variant, - disabled, customColor, customBackgroundColor, }); @@ -256,9 +250,7 @@ const FAB = forwardRef( ...font, }; - const md3Elevation = isFlatMode || disabled ? 0 : 3; - - const newAccessibilityState = { ...accessibilityState, disabled }; + const md3Elevation = isFlatMode ? 0 : 3; return ( ( onPress={onPress} onLongPress={onLongPress} delayLongPress={delayLongPress} - disabled={disabled} accessibilityLabel={accessibilityLabel} accessibilityRole="button" - accessibilityState={newAccessibilityState} + accessibilityState={accessibilityState} testID={testID} style={{ borderRadius }} {...rest} diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 5579728d98..595739b57c 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -306,15 +306,19 @@ const FABGroup = ({ } }; - const { labelColor, backdropColor, stackedFABBackgroundColor } = - getFABGroupColors({ theme, customBackdropColor }); + const { + labelColor, + backdropColor, + backdropOpacity: backdropMaxOpacity, + stackedFABBackgroundColor, + } = getFABGroupColors({ theme, customBackdropColor }); const backdropOpacity = open ? backdrop.interpolate({ inputRange: [0, 0.5, 1], - outputRange: [0, 1, 1], + outputRange: [0, backdropMaxOpacity, backdropMaxOpacity], }) - : backdrop; + : Animated.multiply(backdrop, backdropMaxOpacity); const opacities = animations.current; diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index 384fcc6c45..ad49fa13be 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -7,8 +7,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import type { InternalTheme } from '../../types'; type GetCombinedStylesProps = { @@ -29,7 +27,6 @@ type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface'; type BaseProps = { isVariant: (variant: Variant) => boolean; theme: InternalTheme; - disabled?: boolean; }; export const getCombinedStyles = ({ @@ -165,17 +162,12 @@ export const getCombinedStyles = ({ const getBackgroundColor = ({ theme, isVariant, - disabled, customBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue }) => { - if (customBackgroundColor && !disabled) { + if (customBackgroundColor) { return customBackgroundColor; } - if (disabled) { - return theme.colors.surfaceDisabled; - } - if (isVariant('primary')) { return theme.colors.primaryContainer; } @@ -189,7 +181,7 @@ const getBackgroundColor = ({ } if (isVariant('surface')) { - return theme.colors.elevation.level3; + return theme.colors.surfaceContainerHigh; } return theme.colors.primaryContainer; @@ -198,17 +190,12 @@ const getBackgroundColor = ({ const getForegroundColor = ({ theme, isVariant, - disabled, customColor, }: BaseProps & { customColor?: string }) => { - if (typeof customColor !== 'undefined' && !disabled) { + if (typeof customColor !== 'undefined') { return customColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - if (isVariant('primary')) { return theme.colors.onPrimaryContainer; } @@ -231,13 +218,11 @@ const getForegroundColor = ({ export const getFABColors = ({ theme, variant, - disabled, customColor, customBackgroundColor, }: { theme: InternalTheme; variant: string; - disabled?: boolean; customColor?: string; customBackgroundColor?: ColorValue; }) => { @@ -245,7 +230,7 @@ export const getFABColors = ({ return variant === variantToCompare; }; - const baseFABColorProps = { theme, isVariant, disabled }; + const baseFABColorProps = { theme, isVariant }; const backgroundColor = getBackgroundColor({ ...baseFABColorProps, @@ -267,21 +252,8 @@ const getLabelColor = ({ theme }: { theme: InternalTheme }) => { return theme.colors.onSurface; }; -const getBackdropColor = ({ - theme, - customBackdropColor, -}: { - theme: InternalTheme; - customBackdropColor?: string; -}) => { - if (customBackdropColor) { - return customBackdropColor; - } - return color(theme.colors.background).alpha(0.95).rgb().string(); -}; - const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { - return theme.colors.elevation.level3; + return theme.colors.surfaceContainerHigh; }; export const getFABGroupColors = ({ @@ -293,7 +265,8 @@ export const getFABGroupColors = ({ }) => { return { labelColor: getLabelColor({ theme }), - backdropColor: getBackdropColor({ theme, customBackdropColor }), + backdropColor: customBackdropColor ?? theme.colors.background, + backdropOpacity: customBackdropColor ? 1 : 0.95, stackedFABBackgroundColor: getStackedFABBackgroundColor({ theme }), }; }; diff --git a/src/components/HelperText/HelperText.tsx b/src/components/HelperText/HelperText.tsx index 8043968cff..6fc44d58a5 100644 --- a/src/components/HelperText/HelperText.tsx +++ b/src/components/HelperText/HelperText.tsx @@ -5,6 +5,7 @@ import { StyleProp, StyleSheet, TextStyle, + View, } from 'react-native'; import { getTextColor } from './utils'; @@ -122,36 +123,42 @@ const HelperText = ({ textHeight = e.nativeEvent.layout.height; }; - const textColor = getTextColor({ theme, disabled, type }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + type, + }); return ( - - {rest.children} - + + + {rest.children} + + ); }; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index ab9d2dde8e..767cb74ef0 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,5 +1,8 @@ +import { tokens } from '../../styles/themes/v3/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type BaseProps = { theme: InternalTheme; disabled?: boolean; @@ -7,14 +10,19 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors } = theme; - if (type === 'error') { - return colors?.error; + return { color: theme.colors.error, opacity: stateOpacity.enabled }; } if (disabled) { - return theme.colors.onSurfaceDisabled; + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.disabled, + }; } - return theme.colors.onSurfaceVariant; + + return { + color: theme.colors.onSurfaceVariant, + opacity: stateOpacity.enabled, + }; } diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index dbe7de4841..8cf5bff8d5 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -134,7 +134,13 @@ const IconButton = forwardRef( const IconComponent = animated ? CrossFadeIcon : Icon; - const { iconColor, backgroundColor, borderColor } = getIconButtonColor({ + const { + iconColor, + iconOpacity, + backgroundColor, + borderColor, + backgroundOpacity, + } = getIconButtonColor({ theme, disabled, selected, @@ -162,7 +168,8 @@ const IconButton = forwardRef( testID={`${testID}-container`} style={[ { - backgroundColor, + backgroundColor: + backgroundOpacity < 1 ? undefined : backgroundColor, width: buttonSize, height: buttonSize, }, @@ -173,6 +180,15 @@ const IconButton = forwardRef( container elevation={0} > + {backgroundOpacity < 1 && ( + + )} ( testID={testID} {...rest} > - {loading ? ( - - ) : ( - - )} + + {loading ? ( + + ) : ( + + )} + ); diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index fd985b04aa..653a272750 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -1,5 +1,8 @@ +import { tokens } from '../../styles/themes/v3/tokens'; import type { InternalTheme } from '../../types'; +const { stateOpacity } = tokens.md.ref; + type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal'; type BaseProps = { @@ -9,20 +12,6 @@ type BaseProps = { selected?: boolean; }; -const getBorderColor = ({ - theme, - disabled, -}: { - theme: InternalTheme; - disabled?: boolean; -}) => { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; -}; - const getBackgroundColor = ({ theme, isMode, @@ -32,7 +21,7 @@ const getBackgroundColor = ({ }: BaseProps & { customContainerColor?: string }) => { if (disabled) { if (isMode('contained') || isMode('contained-tonal')) { - return theme.colors.surfaceDisabled; + return theme.colors.onSurface; } } @@ -71,7 +60,7 @@ const getIconColor = ({ customIconColor, }: BaseProps & { customIconColor?: string }) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (typeof customIconColor !== 'undefined') { @@ -136,12 +125,23 @@ export const getIconButtonColor = ({ customIconColor, }); + const iconOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + const backgroundColor = getBackgroundColor({ + ...baseIconColorProps, + customContainerColor, + }); + + const backgroundOpacity = + disabled && (isMode('contained') || isMode('contained-tonal')) + ? stateOpacity.disabled + : stateOpacity.enabled; + return { iconColor, - backgroundColor: getBackgroundColor({ - ...baseIconColorProps, - customContainerColor, - }), - borderColor: getBorderColor({ theme, disabled }), + iconOpacity, + backgroundColor, + borderColor: theme.colors.outlineVariant, + backgroundOpacity, }; }; diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 725e38cd5b..ac77147031 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -145,7 +145,7 @@ const MenuItem = ({ hitSlop, }: Props) => { const theme = useInternalTheme(themeOverrides); - const { titleColor, iconColor } = getMenuItemColor({ + const { titleColor, iconColor, contentOpacity } = getMenuItemColor({ theme, disabled, }); @@ -185,7 +185,7 @@ const MenuItem = ({ accessibilityState={newAccessibilityState} hitSlop={hitSlop} > - + {leadingIcon ? ( diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index 8fc73ca082..f9e3d5d9a1 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -1,6 +1,9 @@ -import type { InternalTheme, MD3Theme } from '../../types'; +import { tokens } from '../../styles/themes/v3/tokens'; +import type { InternalTheme } from '../../types'; import type { IconSource } from '../Icon'; +const { stateOpacity } = tokens.md.ref; + export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; @@ -15,32 +18,23 @@ type ColorProps = { disabled?: boolean; }; -const getDisabledColor = (theme: InternalTheme) => { - return (theme as MD3Theme).colors.onSurfaceDisabled; -}; - -const getTitleColor = ({ theme, disabled }: ColorProps) => { - const { colors } = theme as MD3Theme; - if (disabled) { - return getDisabledColor(theme); - } - - return colors.onSurface; +const getTitleColor = ({ theme }: ColorProps) => { + return theme.colors.onSurface; }; -const getIconColor = ({ theme, disabled }: ColorProps) => { - const { colors } = theme as MD3Theme; - if (disabled) { - return getDisabledColor(theme); - } - - return colors.onSurfaceVariant; +const getIconColor = ({ theme }: ColorProps) => { + return theme.colors.onSurfaceVariant; }; export const getMenuItemColor = ({ theme, disabled }: ColorProps) => { + const contentOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { titleColor: getTitleColor({ theme, disabled }), iconColor: getIconColor({ theme, disabled }), + contentOpacity, }; }; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index dc55c3cf7a..21b1ffd39d 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -14,11 +14,14 @@ import useLatestCallback from 'use-latest-callback'; import Surface from './Surface'; import { useInternalTheme } from '../core/theming'; +import { tokens } from '../styles/themes/v3/tokens'; import type { ThemeProp } from '../types'; import { addEventListener } from '../utils/addEventListener'; import { BackHandler } from '../utils/BackHandler/BackHandler'; import useAnimatedValue from '../utils/useAnimatedValue'; +const { scrimAlpha } = tokens.md.ref; + export type Props = { /** * Determines whether clicking outside the modal dismisses it. @@ -201,8 +204,11 @@ function Modal({ style={[ styles.backdrop, { - backgroundColor: theme.colors?.backdrop, - opacity, + backgroundColor: theme.colors.scrim, + opacity: opacity.interpolate({ + inputRange: [0, 1], + outputRange: [0, scrimAlpha], + }), }, ]} testID={`${testID}-backdrop`} diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx index 515efe5eff..4b68455101 100644 --- a/src/components/RadioButton/RadioButtonAndroid.tsx +++ b/src/components/RadioButton/RadioButtonAndroid.tsx @@ -110,20 +110,18 @@ const RadioButtonAndroid = ({ value, }) === 'checked'; - const { rippleColor, selectionControlColor } = - getAndroidSelectionControlColor({ - theme, - disabled, - checked, - customColor: rest.color, - customUncheckedColor: rest.uncheckedColor, - }); + const { selectionControlColor } = getAndroidSelectionControlColor({ + theme, + disabled, + checked, + customColor: rest.color, + customUncheckedColor: rest.uncheckedColor, + }); return ( ( style={[ { borderRadius: roundness }, { - backgroundColor: colors.elevation.level3, + backgroundColor: theme.colors.surfaceContainerHigh, borderRadius: roundness * (isBarMode ? 7 : 0), }, styles.container, diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx index 6f04b6aeb7..c70ff68ae2 100644 --- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx +++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx @@ -146,7 +146,7 @@ const SegmentedButtonItem = ({ }, [checked, checkScale, showSelectedCheck]); const { roundness } = theme; - const { borderColor, textColor, borderWidth, backgroundColor } = + const { borderColor, textColor, textOpacity, borderWidth, backgroundColor } = getSegmentedButtonColors({ checked, theme, @@ -210,7 +210,9 @@ const SegmentedButtonItem = ({ theme={theme} hitSlop={hitSlop} > - + {showCheckedIcon ? ( { const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => { if (disabled) { - return theme.colors.surfaceDisabled; + return theme.colors.outlineVariant; } return theme.colors.outline; }; @@ -108,7 +111,7 @@ const getSegmentedButtonTextColor = ({ uncheckedColor, }: SegmentedButtonProps) => { if (disabled) { - return theme.colors.onSurfaceDisabled; + return theme.colors.onSurface; } if (checked) { return checkedColor ?? theme.colors.onSecondaryContainer; @@ -141,5 +144,7 @@ export const getSegmentedButtonColors = ({ }); const borderWidth = getSegmentedButtonBorderWidth({ theme }); - return { backgroundColor, borderColor, textColor, borderWidth }; + const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled; + + return { backgroundColor, borderColor, textColor, textOpacity, borderWidth }; }; diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts index 34ffc26eb5..c0afc7c142 100644 --- a/src/components/Switch/utils.ts +++ b/src/components/Switch/utils.ts @@ -81,7 +81,7 @@ const getOnTintColor = ({ } if (value) { - return setColor(checkedColor).alpha(0.5).rgb().string(); + return theme.colors.surfaceContainerHighest; } if (theme.dark) { diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index 20b49233dc..22a8e419cc 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -14,6 +14,7 @@ type UnderlineProps = { activeColor: string; underlineColorCustom?: string; hasActiveOutline?: boolean; + disabledOpacity?: number; style?: StyleProp; theme?: ThemeProp; }; @@ -25,6 +26,7 @@ export const Underline = ({ activeColor, underlineColorCustom, hasActiveOutline, + disabledOpacity, style, theme: _themeOverrides, }: UnderlineProps) => { @@ -44,6 +46,7 @@ export const Underline = ({ styles.md3Underline, { backgroundColor, + opacity: disabledOpacity, // Underlines is thinner when input is not focused transform: [ { diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx index 71a2b78475..94a0c08662 100644 --- a/src/components/TextInput/Adornment/TextInputAffix.tsx +++ b/src/components/TextInput/Adornment/TextInputAffix.tsx @@ -152,12 +152,19 @@ const TextInputAffix = ({ [side]: offset, } as ViewStyle; - const textColor = getTextColor({ theme, disabled }); + const { color: textColor, opacity: textOpacity } = getTextColor({ + theme, + disabled, + }); const content = ( diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index 0005071fe3..0fc2c7c906 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -142,7 +142,7 @@ const TextInputIcon = ({ const theme = useInternalTheme(themeOverrides); - const iconColor = getIconColor({ + const { color: iconColor, opacity: iconOpacity } = getIconColor({ theme, disabled, isTextInputFocused, @@ -150,7 +150,7 @@ const TextInputIcon = ({ }); return ( - + string | undefined) | string; }) { - if (typeof customColor === 'function') { - return customColor(isTextInputFocused); - } - if (customColor) { - return customColor; - } + const color = + typeof customColor === 'function' + ? customColor(isTextInputFocused) + : customColor ?? theme.colors.onSurfaceVariant; - if (disabled) { - return theme.colors.onSurfaceDisabled; - } + const opacity = + disabled && !customColor ? stateOpacity.disabled : stateOpacity.enabled; - return theme.colors.onSurfaceVariant; + return { color, opacity }; } diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index 4877bc236e..6fd869a1c3 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -18,7 +18,6 @@ const InputLabel = (props: InputLabelProps) => { wiggle, error, focused, - opacity, labelLayoutWidth, labelLayoutHeight, labelBackground, @@ -44,6 +43,8 @@ const InputLabel = (props: InputLabelProps) => { backgroundColor, roundness, placeholderColor, + disabledOpacity, + opacity, errorColor, labelTranslationXOffset, maxFontSizeMultiplier, @@ -139,7 +140,12 @@ const InputLabel = (props: InputLabelProps) => { // This gives the effect of animating the color, but allows us to use native driver { if (textColor) { return textColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurface; }; const getActiveColor = ({ theme, - disabled, error, activeUnderlineColor, activeOutlineColor, @@ -340,18 +333,10 @@ const getActiveColor = ({ return modeColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.primary; }; -const getPlaceholderColor = ({ theme, disabled }: BaseProps) => { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - +const getPlaceholderColor = ({ theme }: BaseProps) => { return theme.colors.onSurfaceVariant; }; @@ -365,17 +350,12 @@ const getSelectionColor = ({ if (typeof customSelectionColor !== 'undefined') { return customSelectionColor; } - - if (Platform.OS === 'android') { - return color(activeColor).alpha(0.54).rgb().string(); - } - return activeColor; }; const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => { if (disabled) { - return color(theme.colors.onSurface).alpha(0.04).rgb().string(); + return theme.colors.surfaceContainerHighest; } return theme.colors.surfaceVariant; @@ -390,10 +370,6 @@ const getFlatUnderlineColor = ({ return underlineColor; } - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurfaceVariant; }; @@ -410,8 +386,7 @@ const getOutlinedOutlineInputColor = ({ if (theme.dark) { return 'transparent'; } - - return theme.colors.surfaceDisabled; + return theme.colors.outlineVariant; } return theme.colors.outline; @@ -442,12 +417,17 @@ export const getFlatInputColors = ({ mode: 'flat', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseFlatColorProps, textColor, }), activeColor, + disabledOpacity, underlineColorCustom: getFlatUnderlineColor({ ...baseFlatColorProps, underlineColor, @@ -484,12 +464,17 @@ export const getOutlinedInputColors = ({ mode: 'outlined', }); + const disabledOpacity = disabled + ? stateOpacity.disabled + : stateOpacity.enabled; + return { inputTextColor: getInputTextColor({ ...baseOutlinedColorProps, textColor, }), activeColor, + disabledOpacity, outlineColor: getOutlinedOutlineInputColor({ ...baseOutlinedColorProps, customOutlineColor, diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 1f710e4089..49bc46e121 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -115,6 +115,7 @@ export type LabelProps = { paddingRight?: number; labelTranslationXOffset?: number; placeholderColor: string | null; + disabledOpacity?: number; backgroundColor?: ColorValue; label?: TextInputLabelProp | null; hasActiveOutline?: boolean | null; diff --git a/src/components/ToggleButton/utils.ts b/src/components/ToggleButton/utils.ts index efb2857bed..e471a5b4b6 100644 --- a/src/components/ToggleButton/utils.ts +++ b/src/components/ToggleButton/utils.ts @@ -1,6 +1,3 @@ -import color from 'color'; - -import { tokens } from '../../styles/themes/v3/tokens'; import type { InternalTheme } from '../../types'; export const getToggleButtonColor = ({ @@ -11,10 +8,7 @@ export const getToggleButtonColor = ({ checked: boolean | null; }) => { if (checked) { - return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string(); + return theme.colors.surfaceContainerHighest; } - return 'transparent'; + return theme.colors.surfaceContainer; }; diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts index 83308eb228..10dcef6703 100644 --- a/src/components/TouchableRipple/utils.ts +++ b/src/components/TouchableRipple/utils.ts @@ -29,7 +29,7 @@ const getRippleColor = ({ return rippleColor; } - return color(theme.colors.onSurface).alpha(0.1).rgb().string(); + return theme.colors.stateLayerPressed; }; export const getTouchableRippleColors = ({ diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 6c80269a0f..e1c55fa8c8 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -232,21 +232,6 @@ describe('AppbarAction', () => { expect(appbarActionIcon.props.color).toBe('purple'); }); - it('should be rendered with custom ripple color', () => { - const { getByTestId } = render( - - - - ); - const appbarActionContainer = getByTestId('appbar-action-container').props - .children; - expect(appbarActionContainer.props.rippleColor).toBe('purple'); - }); - it('should render AppbarBackAction with custom color', () => { const { getByTestId } = render( diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 50ab8e3cd6..82c623d863 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -46,7 +46,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -64,7 +64,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -104,7 +104,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -181,35 +181,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -288,7 +296,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -365,35 +373,43 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -471,7 +487,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,76 +566,84 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - + > + + @@ -714,7 +738,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -792,66 +816,74 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A > - - menu - + + menu + + diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 3d16801c15..b47be8c53e 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -5,9 +5,12 @@ import { act, fireEvent, render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; import { pink500, white } from '../../styles/themes/v2/colors'; +import { tokens } from '../../styles/themes/v3/tokens'; import Button from '../Button/Button'; import { getButtonColors } from '../Button/utils'; +const { stateOpacity } = tokens.md.ref; + const styles = StyleSheet.create({ flexing: { flexDirection: 'row-reverse', @@ -349,7 +352,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: stateOpacity.pressed, }); }) ); @@ -364,7 +368,8 @@ describe('getButtonColors - background color', () => { disabled: true, }) ).toMatchObject({ - backgroundColor: getTheme(true).colors.surfaceDisabled, + backgroundColor: getTheme(true).colors.onSurface, + backgroundOpacity: stateOpacity.pressed, }); }) ); @@ -376,7 +381,7 @@ describe('getButtonColors - background color', () => { mode: 'elevated', }) ).toMatchObject({ - backgroundColor: getTheme().colors.elevation.level1, + backgroundColor: getTheme().colors.surfaceContainerLow, }); }); @@ -387,7 +392,7 @@ describe('getButtonColors - background color', () => { mode: 'elevated', }) ).toMatchObject({ - backgroundColor: getTheme(true).colors.elevation.level1, + backgroundColor: getTheme(true).colors.surfaceContainerLow, }); }); @@ -485,7 +490,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + textOpacity: stateOpacity.disabled, }); }); @@ -498,7 +504,8 @@ describe('getButtonColors - text color', () => { mode: 'text', }) ).toMatchObject({ - textColor: getTheme(true).colors.onSurfaceDisabled, + textColor: getTheme(true).colors.onSurface, + textOpacity: stateOpacity.disabled, }); }); @@ -596,7 +603,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -608,7 +615,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.surfaceDisabled, + borderColor: getTheme(true).colors.outlineVariant, }); }); @@ -619,7 +626,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -630,7 +637,7 @@ describe('getButtonColors - border color', () => { mode: 'outlined', }) ).toMatchObject({ - borderColor: getTheme(true).colors.outline, + borderColor: getTheme(true).colors.outlineVariant, }); }); diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 3325829520..5c416c9720 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -165,6 +165,7 @@ exports[`can render leading checkbox control 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -262,6 +263,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -323,6 +325,7 @@ exports[`can render the Android checkbox on different platforms 1`] = ` collapsable={false} style={ { + "opacity": 1, "transform": [ { "scale": 1, @@ -478,6 +481,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -658,6 +662,7 @@ exports[`renders unchecked 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index 3e551140c5..799a343768 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -1,50 +1,10 @@ -import color from 'color'; - import { getTheme } from '../../../core/theming'; +import { tokens } from '../../../styles/themes/v3/tokens'; import { getAndroidSelectionControlColor, getSelectionControlIOSColor, } from '../../Checkbox/utils'; - -describe('getAndroidSelectionControlColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - - it('should return custom color', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - customColor: 'purple', - checked: false, - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), - }); - }); - - it('should return theme color, for theme version 3', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), - }); - }); -}); +const { stateOpacity } = tokens.md.ref; describe('getAndroidSelectionControlColor - checkbox color', () => { it('should return correct disabled color, for theme version 3', () => { @@ -55,7 +15,8 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { checked: false, }) ).toMatchObject({ - selectionControlColor: getTheme().colors.onSurfaceDisabled, + selectionControlColor: getTheme().colors.onSurface, + selectionControlOpacity: stateOpacity.disabled, }); }); @@ -104,41 +65,26 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { selectionControlColor: getTheme().colors.onSurfaceVariant, }); }); -}); - -describe('getSelectionControlIOSColor - ripple color', () => { - it('should return correct disabled color, for theme version 3', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme().colors.onSurface) - .alpha(0.16) - .rgb() - .string(), - }); - }); - it('should return custom color', () => { + it('should return theme color, unchecked, dark mode', () => { expect( - getSelectionControlIOSColor({ - theme: getTheme(), - customColor: 'purple', + getAndroidSelectionControlColor({ + theme: getTheme(true), + checked: false, }) ).toMatchObject({ - rippleColor: color('purple').fade(0.32).rgb().string(), + selectionControlColor: getTheme(true).colors.onSurfaceVariant, }); }); - it('should return theme color, for theme version 3', () => { + it('should return theme color, unchecked, light mode', () => { expect( - getSelectionControlIOSColor({ - theme: getTheme(), + getAndroidSelectionControlColor({ + theme: getTheme(false), + checked: false, }) ).toMatchObject({ - rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), + selectionControlColor: getTheme(false).colors.onSurfaceVariant, }); }); }); @@ -151,7 +97,8 @@ describe('getSelectionControlIOSColor - checked color', () => { disabled: true, }) ).toMatchObject({ - checkedColor: getTheme().colors.onSurfaceDisabled, + checkedColor: getTheme().colors.primary, + checkedColorOpacity: stateOpacity.disabled, }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index 5505a3726e..76044715b2 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -5,9 +5,12 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; +import { tokens } from '../../styles/themes/v3/tokens'; import Chip from '../Chip/Chip'; import { getChipColors } from '../Chip/helpers'; +const { stateOpacity } = tokens.md.ref; + it('renders chip with onPress', () => { const tree = render( {}}>Example Chip).toJSON(); @@ -99,7 +102,8 @@ describe('getChipColors - text color', () => { isOutlined: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + contentOpacity: stateOpacity.disabled, }); }); @@ -147,7 +151,8 @@ describe('getChipColors - icon color', () => { isOutlined: false, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + contentOpacity: stateOpacity.disabled, }); }); @@ -187,7 +192,7 @@ describe('getChipColors - icon color', () => { }); describe('getChipColor - selected background color', () => { - it('should return custom color, for theme version 3, outlined mode', () => { + it('should return custom color, outlined mode', () => { expect( getChipColors({ theme: getTheme(), @@ -195,14 +200,11 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); - it('should return custom color, for theme version 3, flat mode', () => { + it('should return custom color, flat mode', () => { expect( getChipColors({ theme: getTheme(), @@ -210,42 +212,32 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), + selectedBackgroundColor: 'purple', }); }); - it('should return custom color, for theme version 3, outlined mode, show selected overlay', () => { + it('should return theme color, for theme version 3, flat mode', () => { expect( getChipColors({ theme: getTheme(), - customBackgroundColor: 'purple', - showSelectedOverlay: true, - isOutlined: true, + isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSurfaceVariant), 0.12) - .rgb() - .string(), + selectedBackgroundColor: getTheme().colors.secondaryContainer, }); }); +}); - it('should return custom color, for theme version 3, flat mode, show selected overlay', () => { +describe('getChipColor - background color', () => { + it('should return custom color', () => { expect( getChipColors({ theme: getTheme(), customBackgroundColor: 'purple', - showSelectedOverlay: true, isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') - .mix(color(getTheme().colors.onSecondaryContainer), 0.12) - .rgb() - .string(), + backgroundColor: 'purple', }); }); @@ -256,10 +248,7 @@ describe('getChipColor - selected background color', () => { isOutlined: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.surface) - .mix(color(getTheme().colors.onSurfaceVariant), 0) - .rgb() - .string(), + backgroundColor: getTheme().colors.surface, }); }); @@ -270,56 +259,64 @@ describe('getChipColor - selected background color', () => { isOutlined: false, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.secondaryContainer) - .mix(color(getTheme().colors.onSecondaryContainer), 0) - .rgb() - .string(), + backgroundColor: getTheme().colors.secondaryContainer, }); }); }); -describe('getChipColor - background color', () => { - it('should return custom color', () => { +describe('getChipColor - border color', () => { + it('should return correct disabled color, for theme version 3', () => { expect( getChipColors({ theme: getTheme(), - customBackgroundColor: 'purple', + disabled: true, isOutlined: false, }) ).toMatchObject({ - backgroundColor: 'purple', + borderColor: 'transparent', }); }); - it('should return theme color, for theme version 3, outlined mode', () => { + it('should return custom color, for theme version 3', () => { expect( getChipColors({ theme: getTheme(), - isOutlined: true, + selectedColor: 'purple', + isOutlined: false, }) ).toMatchObject({ - backgroundColor: getTheme().colors.surface, + borderColor: 'transparent', }); }); - it('should return theme color, for theme version 3, flat mode', () => { + it('should return theme color, for theme version 3', () => { expect( getChipColors({ theme: getTheme(), isOutlined: false, }) ).toMatchObject({ - backgroundColor: getTheme().colors.secondaryContainer, + borderColor: 'transparent', }); }); -}); -describe('getChipColor - border color', () => { - it('should return correct disabled color, for theme version 3', () => { + it('should return custom color, outlined mode', () => { expect( getChipColors({ - theme: getTheme(), - disabled: true, + theme: getTheme(false), + selectedColor: 'purple', + isOutlined: true, + }) + ).toMatchObject({ + borderColor: color('purple').alpha(0.29).rgb().string(), + }); + }); + + it('should return custom color, flat mode', () => { + expect( + getChipColors({ + theme: getTheme(true), + customBackgroundColor: 'purple', isOutlined: false, }) ).toMatchObject({ @@ -327,11 +324,32 @@ describe('getChipColor - border color', () => { }); }); - it('should return custom color, for theme version 3', () => { + it('should return theme color, light mode, outlined mode', () => { expect( getChipColors({ - theme: getTheme(), - selectedColor: 'purple', + theme: getTheme(false), + isOutlined: true, + }) + ).toMatchObject({ + borderColor: getTheme(false).colors.outlineVariant, + }); + }); + + it('should return theme color, dark mode, outlined mode', () => { + expect( + getChipColors({ + theme: getTheme(true), + isOutlined: true, + }) + ).toMatchObject({ + borderColor: getTheme(true).colors.outlineVariant, + }); + }); + + it('should return theme background color, light mode, flat mode', () => { + expect( + getChipColors({ + theme: getTheme(false), isOutlined: false, }) ).toMatchObject({ @@ -339,10 +357,10 @@ describe('getChipColor - border color', () => { }); }); - it('should return theme color, for theme version 3', () => { + it('should return theme background color, dark mode, flat mode', () => { expect( getChipColors({ - theme: getTheme(), + theme: getTheme(true), isOutlined: false, }) ).toMatchObject({ diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index 74f636cf5c..9fc9c12e98 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -91,12 +91,6 @@ it('renders loading FAB with custom size prop', () => { expect(tree).toMatchSnapshot(); }); -it('renders disabled FAB', () => { - const tree = render( {}} icon="plus" disabled />).toJSON(); - - expect(tree).toMatchSnapshot(); -}); - it('renders custom color for the icon and label of the FAB', () => { const tree = render( {}} icon="plus" color="#AA0114" /> @@ -196,19 +190,7 @@ describe('getFABColors - background color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme().colors.surfaceDisabled, - }); - }); - - it('should return correct theme color, for theme version 3, primary variant', () => { + it('should return correct theme color, primary variant', () => { expect( getFABColors({ theme: getTheme(), @@ -248,7 +230,7 @@ describe('getFABColors - background color', () => { variant: 'surface', }) ).toMatchObject({ - backgroundColor: getTheme().colors.elevation.level3, + backgroundColor: getTheme().colors.surfaceContainerHigh, }); }); }); @@ -266,19 +248,7 @@ describe('getFABColors - foreground color', () => { }); }); - it('should return correct disabled color, for theme version 3', () => { - expect( - getFABColors({ - theme: getTheme(), - variant: 'primary', - disabled: true, - }) - ).toMatchObject({ - foregroundColor: getTheme().colors.onSurfaceDisabled, - }); - }); - - it('should return correct theme color, for theme version 3, primary variant', () => { + it('should return correct theme color, primary variant', () => { expect( getFABColors({ theme: getTheme(), diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 7009526e42..5f25e46c6f 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; import FAB from '../FAB'; @@ -26,10 +25,30 @@ describe('getFABGroupColors - backdrop color', () => { theme: getTheme(), }) ).toMatchObject({ - backdropColor: color(getTheme().colors.background) - .alpha(0.95) - .rgb() - .string(), + backdropColor: getTheme().colors.background, + }); + }); +}); + +describe('getFABGroupColors - backdrop opacity', () => { + it('should return scrimAlpha when no custom backdrop color', () => { + expect( + getFABGroupColors({ + theme: getTheme(), + }) + ).toMatchObject({ + backdropOpacity: 0.95, + }); + }); + + it('should return 1 when custom backdrop color is provided', () => { + expect( + getFABGroupColors({ + theme: getTheme(), + customBackdropColor: 'transparent', + }) + ).toMatchObject({ + backdropOpacity: 1, }); }); }); @@ -53,7 +72,7 @@ describe('getFABGroupColors - stacked FAB background color', () => { theme: getTheme(), }) ).toMatchObject({ - stackedFABBackgroundColor: getTheme().colors.elevation.level3, + stackedFABBackgroundColor: getTheme().colors.surfaceContainerHigh, }); }); }); diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 39d1eb8663..fdd3316850 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -5,9 +5,12 @@ import { act, render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; import { pink500 } from '../../styles/themes/v2/colors'; +import { tokens } from '../../styles/themes/v3/tokens'; import IconButton from '../IconButton/IconButton'; import { getIconButtonColor } from '../IconButton/utils'; +const { stateOpacity } = tokens.md.ref; + const styles = StyleSheet.create({ square: { borderRadius: 0, @@ -96,7 +99,8 @@ describe('getIconButtonColor - icon color', () => { disabled: true, }) ).toMatchObject({ - iconColor: getTheme().colors.onSurfaceDisabled, + iconColor: getTheme().colors.onSurface, + iconOpacity: stateOpacity.disabled, }); }); @@ -211,7 +215,10 @@ describe('getIconButtonColor - background color', () => { mode, disabled: true, }) - ).toMatchObject({ backgroundColor: getTheme().colors.surfaceDisabled }); + ).toMatchObject({ + backgroundColor: getTheme().colors.onSurface, + backgroundOpacity: stateOpacity.disabled, + }); }) ); @@ -292,7 +299,7 @@ describe('getIconButtonColor - border color', () => { disabled: true, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -302,7 +309,7 @@ describe('getIconButtonColor - border color', () => { theme: getTheme(), }) ).toMatchObject({ - borderColor: getTheme().colors.outline, + borderColor: getTheme().colors.outlineVariant, }); }); }); diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 10fb008b5e..dead127da1 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -3,9 +3,12 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; +import { tokens } from '../../styles/themes/v3/tokens'; import Menu from '../Menu/Menu'; import { getMenuItemColor } from '../Menu/utils'; +const { stateOpacity } = tokens.md.ref; + describe('Menu Item', () => { it('renders menu item', () => { const tree = render( @@ -70,7 +73,10 @@ describe('getMenuItemColor - title color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); + ).toMatchObject({ + titleColor: getTheme().colors.onSurface, + contentOpacity: stateOpacity.disabled, + }); }); it('should return correct theme color, for theme version 3', () => { @@ -91,7 +97,10 @@ describe('getMenuItemColor - icon color', () => { theme: getTheme(), disabled: true, }) - ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); + ).toMatchObject({ + iconColor: getTheme().colors.onSurfaceVariant, + contentOpacity: stateOpacity.disabled, + }); }); it('should return correct theme color, for theme version 3', () => { diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx index 32161d5b84..d040cc62de 100644 --- a/src/components/__tests__/Modal.test.tsx +++ b/src/components/__tests__/Modal.test.tsx @@ -9,8 +9,11 @@ import { import { act, fireEvent, render } from '@testing-library/react-native'; import { MD3LightTheme } from '../../styles/themes'; +import { tokens } from '../../styles/themes/v3/tokens'; import Modal from '../Modal'; +const { scrimAlpha } = tokens.md.ref; + jest.mock('react-native-safe-area-context', () => ({ useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }), })); @@ -55,7 +58,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - backgroundColor: MD3LightTheme.colors.backdrop, + backgroundColor: MD3LightTheme.colors.scrim, }); }); @@ -66,7 +69,7 @@ describe('Modal', () => { testID="modal" theme={{ colors: { - backdrop: 'transparent', + scrim: 'transparent', }, }} > @@ -119,7 +122,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -156,7 +159,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -198,7 +201,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -241,7 +244,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -308,7 +311,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ @@ -376,7 +379,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -393,7 +396,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -406,7 +409,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -453,7 +456,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -466,7 +469,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -491,7 +494,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -504,7 +507,7 @@ describe('Modal', () => { ); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, @@ -527,7 +530,7 @@ describe('Modal', () => { }); expect(getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 1, + opacity: scrimAlpha, }); expect(getByTestId('modal-surface-outer-layer')).toHaveStyle({ opacity: 1, diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index de667249ae..f44e395c55 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -163,6 +163,7 @@ exports[`can render leading radio button control 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "right", }, undefined, @@ -257,6 +258,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -408,6 +410,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, @@ -585,6 +588,7 @@ exports[`renders unchecked 1`] = ` }, { "color": "rgba(29, 27, 32, 1)", + "opacity": 1, "textAlign": "left", }, undefined, diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx index e65f9015f7..e04f4791c8 100644 --- a/src/components/__tests__/SegmentedButton.test.tsx +++ b/src/components/__tests__/SegmentedButton.test.tsx @@ -3,12 +3,15 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; +import { tokens } from '../../styles/themes/v3/tokens'; import SegmentedButtons from '../SegmentedButtons/SegmentedButtons'; import { getDisabledSegmentedButtonStyle, getSegmentedButtonColors, } from '../SegmentedButtons/utils'; +const { stateOpacity } = tokens.md.ref; + it('renders segmented button', () => { const tree = render( { 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()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} @@ -121,7 +124,7 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - borderColor: getTheme().colors.surfaceDisabled, + borderColor: getTheme().colors.outlineVariant, }); }); @@ -145,7 +148,8 @@ describe('getSegmentedButtonColors', () => { checked: false, }) ).toMatchObject({ - textColor: getTheme().colors.onSurfaceDisabled, + textColor: getTheme().colors.onSurface, + textOpacity: stateOpacity.disabled, }); }); }); diff --git a/src/components/__tests__/Surface.test.tsx b/src/components/__tests__/Surface.test.tsx index 8d8e639779..045a63a3e6 100644 --- a/src/components/__tests__/Surface.test.tsx +++ b/src/components/__tests__/Surface.test.tsx @@ -65,7 +65,7 @@ describe('Surface', () => { shadowRadius: 12, }); expect(getByTestId('surface-test')).toHaveStyle({ - backgroundColor: getTheme().colors.elevation.level5, + backgroundColor: getTheme().colors.surfaceContainerHighest, }); }); @@ -256,7 +256,7 @@ describe('Surface', () => { expect(getByTestId(testID)).not.toHaveStyle({ elevation: 5 }); expect(getByTestId(testID)).toHaveStyle({ - backgroundColor: getTheme().colors.elevation.level5, + backgroundColor: getTheme().colors.surfaceContainerHighest, }); }); }); diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index dfaa028b43..ee7a82a15d 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -198,7 +198,7 @@ describe('getSwitchColor - on tint color', () => { color: 'purple', }) ).toMatchObject({ - onTintColor: color('purple').alpha(0.5).rgb().string(), + checkedColor: 'purple', }); }); diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index c92ed138c4..2fbebb326f 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -3,16 +3,18 @@ import * as React from 'react'; import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming'; import { red500 } from '../../styles/themes/v2/colors'; +import { tokens } from '../../styles/themes/v3/tokens'; import { getFlatInputColors, getOutlinedInputColors, } from '../TextInput/helpers'; import TextInput, { Props } from '../TextInput/TextInput'; +const { stateOpacity } = tokens.md.ref; + const style = StyleSheet.create({ inputStyle: { color: red500, @@ -547,7 +549,7 @@ describe('getFlatInputColor - underline color', () => { theme: getTheme(), }) ).toMatchObject({ - underlineColorCustom: getTheme().colors.onSurfaceDisabled, + underlineColorCustom: getTheme().colors.onSurfaceVariant, }); }); @@ -610,7 +612,8 @@ describe('getFlatInputColor - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: stateOpacity.disabled, }); }); @@ -626,18 +629,19 @@ describe('getFlatInputColor - input text color', () => { }); describe('getFlatInputColor - placeholder color', () => { - it('should return correct disabled color, for theme version 3', () => { + it('should return correct disabled color', () => { expect( getFlatInputColors({ disabled: true, theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: stateOpacity.disabled, }); }); - it('should return correct theme color, for theme version 3', () => { + it('should return correct theme color', () => { expect( getFlatInputColors({ theme: getTheme(), @@ -656,10 +660,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(), }) ).toMatchObject({ - backgroundColor: color(getTheme().colors.onSurface) - .alpha(0.04) - .rgb() - .string(), + backgroundColor: getTheme().colors.surfaceContainerHighest, }); expect( getFlatInputColors({ @@ -667,10 +668,7 @@ describe('getFlatInputColor - background color', () => { theme: getTheme(true), }) ).toMatchObject({ - backgroundColor: color(getTheme(true).colors.onSurface) - .alpha(0.04) - .rgb() - .string(), + backgroundColor: getTheme(true).colors.surfaceContainerHighest, }); }); @@ -715,7 +713,8 @@ describe('getFlatInputColor - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, + activeColor: getTheme().colors.primary, + disabledOpacity: stateOpacity.disabled, }); }); @@ -778,7 +777,7 @@ describe('getOutlinedInputColors - outline color', () => { theme: getTheme(), }) ).toMatchObject({ - outlineColor: getTheme().colors.surfaceDisabled, + outlineColor: getTheme().colors.outlineVariant, }); }); @@ -832,7 +831,8 @@ describe('getOutlinedInputColors - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceDisabled, + inputTextColor: getTheme().colors.onSurface, + disabledOpacity: stateOpacity.disabled, }); }); @@ -855,7 +855,8 @@ describe('getOutlinedInputColors - placeholder color', () => { theme: getTheme(), }) ).toMatchObject({ - placeholderColor: getTheme().colors.onSurfaceDisabled, + placeholderColor: getTheme().colors.onSurfaceVariant, + disabledOpacity: stateOpacity.disabled, }); }); @@ -900,7 +901,8 @@ describe('getOutlinedInputColors - active color', () => { theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme().colors.onSurfaceDisabled, + activeColor: getTheme().colors.primary, + disabledOpacity: stateOpacity.disabled, }); }); diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 61936f4909..a830558681 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -2,10 +2,8 @@ import * as React from 'react'; import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { tokens } from '../../styles/themes/v3/tokens'; import ToggleButton from '../ToggleButton'; import { getToggleButtonColor } from '../ToggleButton/utils'; @@ -36,25 +34,19 @@ it('renders unchecked toggle button', () => { describe('getToggleButtonColor', () => { it('should return correct color when checked and theme version 3', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe( - color(getTheme().colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string() + getTheme().colors.surfaceContainerHighest ); }); it('should return correct color when checked and theme version 3, dark theme', () => { expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe( - color(getTheme(true).colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string() + getTheme(true).colors.surfaceContainerHighest ); }); - it('should return transparent color when not checked', () => { + it('should return correct color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( - 'transparent' + getTheme().colors.surfaceContainer ); }); }); diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 0a61a1a3de..6be6a1afa3 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -5,7 +5,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -22,7 +22,7 @@ exports[`render visible banner, with custom theme 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -208,6 +208,9 @@ exports[`render visible banner, with custom theme 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -278,7 +281,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 0, "shadowColor": "#000", "shadowOffset": { @@ -295,7 +298,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -413,7 +416,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -430,7 +433,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -638,6 +641,9 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -708,7 +714,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -725,7 +731,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -911,6 +917,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1060,6 +1069,9 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1130,7 +1142,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1147,7 +1159,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { @@ -1275,7 +1287,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "opacity": 1, "shadowColor": "#000", "shadowOffset": { @@ -1292,7 +1304,7 @@ exports[`renders visible banner, without action buttons and without image 1`] = collapsable={false} style={ { - "backgroundColor": "rgba(255, 255, 255, 1)", + "backgroundColor": "rgba(247, 242, 250, 1)", "flex": undefined, "shadowColor": "#000", "shadowOffset": { diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index 6bc02934ba..587006fa3d 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -113,7 +113,7 @@ exports[`allows customizing Route's type via generics 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -780,7 +780,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -1521,7 +1521,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -2394,7 +2394,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -4123,7 +4123,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -5597,7 +5597,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -6299,7 +6299,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -7293,7 +7293,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -8394,7 +8394,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -9342,7 +9342,7 @@ exports[`renders non-shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } @@ -10443,7 +10443,7 @@ exports[`renders shifting bottom navigation 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "overflow": "hidden", } } diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index fddcd2bc10..6c34864a74 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -92,6 +92,9 @@ exports[`renders button with an accessibility hint 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -242,6 +245,9 @@ exports[`renders button with an accessibility label 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -391,6 +397,9 @@ exports[`renders button with button color 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -540,6 +549,9 @@ exports[`renders button with color 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -689,6 +701,9 @@ exports[`renders button with custom testID 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -838,6 +853,9 @@ exports[`renders button with icon 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1036,6 +1054,9 @@ exports[`renders button with icon in reverse order 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, { "flexDirection": "row-reverse", }, @@ -1236,6 +1257,9 @@ exports[`renders contained contained with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1386,6 +1410,9 @@ exports[`renders disabled button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -1422,7 +1449,7 @@ exports[`renders disabled button 1`] = ` undefined, false, { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1535,6 +1562,9 @@ exports[`renders loading button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -1824,7 +1854,7 @@ exports[`renders outlined button with mode 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -1892,6 +1922,9 @@ exports[`renders outlined button with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -2042,6 +2075,9 @@ exports[`renders text button by default 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -2191,6 +2227,9 @@ exports[`renders text button with mode 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index f6d6b1379f..4c6358aa1d 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -100,6 +100,9 @@ exports[`renders chip with close button 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 34, }, @@ -395,6 +398,9 @@ exports[`renders chip with custom close button 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 34, }, @@ -690,6 +696,9 @@ exports[`renders chip with icon 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, @@ -892,6 +901,9 @@ exports[`renders chip with onPress 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, @@ -972,7 +984,7 @@ exports[`renders outlined disabled chip 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(73, 69, 79, 0.12)", + "borderColor": "rgba(243, 237, 247, 1)", "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, @@ -1049,6 +1061,9 @@ exports[`renders outlined disabled chip 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 0.38, + }, { "paddingRight": 0, }, @@ -1081,7 +1096,7 @@ exports[`renders outlined disabled chip 1`] = ` "textAlignVertical": "center", }, { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 14, "fontWeight": "500", @@ -1111,7 +1126,7 @@ exports[`renders selected chip 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(232, 222, 248)", + "backgroundColor": "rgba(232, 222, 248, 1)", "borderRadius": 8, "shadowColor": "#000", "shadowOffset": { @@ -1128,7 +1143,7 @@ exports[`renders selected chip 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgb(232, 222, 248)", + "backgroundColor": "rgba(232, 222, 248, 1)", "borderColor": "transparent", "borderRadius": 8, "borderStyle": "solid", @@ -1206,6 +1221,9 @@ exports[`renders selected chip 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 7fde640799..f6071c245c 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -233,7 +233,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], @@ -314,7 +314,7 @@ exports[`DataTable.Header renders data table header 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], @@ -366,7 +366,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -404,7 +404,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -481,35 +481,43 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -538,7 +546,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -615,35 +623,43 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -690,7 +706,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -730,7 +746,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -807,35 +823,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -864,7 +888,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -941,35 +965,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -998,7 +1030,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1075,35 +1107,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1132,7 +1172,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1209,35 +1249,43 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -1284,7 +1332,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1324,7 +1372,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1401,35 +1449,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -1458,7 +1514,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1535,35 +1591,43 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = ` } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -1620,7 +1684,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1654,7 +1718,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -1723,6 +1787,9 @@ exports[`DataTable.Pagination renders data table pagination with options select "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, { "flexDirection": "row-reverse", }, @@ -1853,7 +1920,7 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginRight": 16, }, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, ], ] @@ -1893,7 +1960,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1970,35 +2037,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - page-first - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-first + + @@ -2027,7 +2102,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2104,35 +2179,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-left - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-left + + @@ -2161,7 +2244,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2238,35 +2321,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - chevron-right - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + chevron-right + + @@ -2295,7 +2386,7 @@ exports[`DataTable.Pagination renders data table pagination with options select style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2372,35 +2463,43 @@ exports[`DataTable.Pagination renders data table pagination with options select } testID="icon-button" > - + - page-last - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + page-last + + @@ -2738,7 +2837,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = ` }, {}, { - "color": "rgba(29, 27, 32, 0.6)", + "color": "rgba(73, 69, 79, 1)", }, undefined, ], diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index 3eb29a581a..7dbef02469 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -522,180 +522,6 @@ exports[`renders default FAB 1`] = ` `; -exports[`renders disabled FAB 1`] = ` - - - - - - - - plus - - - - - - - -`; - exports[`renders extended FAB 1`] = ` - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -167,7 +175,7 @@ exports[`renders icon button by default 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -243,35 +251,43 @@ exports[`renders icon button by default 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -303,7 +319,7 @@ exports[`renders icon button with color 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -379,35 +395,43 @@ exports[`renders icon button with color 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -439,7 +463,7 @@ exports[`renders icon button with size 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 23, "borderWidth": 0, "elevation": 0, @@ -515,35 +539,43 @@ exports[`renders icon button with size 1`] = ` } testID="icon-button" > - + - camera - + [ + { + "lineHeight": 30, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + camera + + @@ -575,7 +607,7 @@ exports[`renders icon change animated 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -653,66 +685,74 @@ exports[`renders icon change animated 1`] = ` > - - camera - + + camera + + diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap index 2ae673d6d3..d194b59877 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap @@ -216,6 +216,9 @@ exports[`renders list item with custom description 1`] = ` { "paddingLeft": 0, }, + { + "opacity": 1, + }, { "paddingRight": 0, }, diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index fa4dd4024d..bb71edde3b 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -16,13 +16,12 @@ exports[`renders list section with custom title style 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgba(255, 255, 255, 1)", - "level2": "rgba(247, 242, 250, 1)", - "level3": "rgba(243, 237, 247, 1)", + "level1": "rgba(247, 242, 250, 1)", + "level2": "rgba(243, 237, 247, 1)", + "level3": "rgba(236, 230, 240, 1)", "level4": "rgba(236, 230, 240, 1)", "level5": "rgba(230, 224, 233, 1)", }, @@ -43,7 +42,6 @@ exports[`renders list section with custom title style 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(49, 17, 29, 1)", @@ -61,6 +59,7 @@ exports[`renders list section with custom title style 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -69,7 +68,6 @@ exports[`renders list section with custom title style 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -562,13 +560,12 @@ exports[`renders list section with subheader 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgba(255, 255, 255, 1)", - "level2": "rgba(247, 242, 250, 1)", - "level3": "rgba(243, 237, 247, 1)", + "level1": "rgba(247, 242, 250, 1)", + "level2": "rgba(243, 237, 247, 1)", + "level3": "rgba(236, 230, 240, 1)", "level4": "rgba(236, 230, 240, 1)", "level5": "rgba(230, 224, 233, 1)", }, @@ -589,7 +586,6 @@ exports[`renders list section with subheader 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(49, 17, 29, 1)", @@ -607,6 +603,7 @@ exports[`renders list section with subheader 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -615,7 +612,6 @@ exports[`renders list section with subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", @@ -1106,13 +1102,12 @@ exports[`renders list section without subheader 1`] = ` "scale": 1, }, "colors": { - "backdrop": "rgba(50, 47, 55, 0.4)", "background": "rgba(254, 247, 255, 1)", "elevation": { "level0": "transparent", - "level1": "rgba(255, 255, 255, 1)", - "level2": "rgba(247, 242, 250, 1)", - "level3": "rgba(243, 237, 247, 1)", + "level1": "rgba(247, 242, 250, 1)", + "level2": "rgba(243, 237, 247, 1)", + "level3": "rgba(236, 230, 240, 1)", "level4": "rgba(236, 230, 240, 1)", "level5": "rgba(230, 224, 233, 1)", }, @@ -1133,7 +1128,6 @@ exports[`renders list section without subheader 1`] = ` "onSecondaryFixed": "rgba(29, 25, 43, 1)", "onSecondaryFixedVariant": "rgba(74, 68, 88, 1)", "onSurface": "rgba(29, 27, 32, 1)", - "onSurfaceDisabled": "rgba(29, 27, 32, 0.38)", "onSurfaceVariant": "rgba(73, 69, 79, 1)", "onTertiary": "rgba(255, 255, 255, 1)", "onTertiaryContainer": "rgba(49, 17, 29, 1)", @@ -1151,6 +1145,7 @@ exports[`renders list section without subheader 1`] = ` "secondaryFixed": "rgba(232, 222, 248, 1)", "secondaryFixedDim": "rgba(204, 194, 220, 1)", "shadow": "rgba(0, 0, 0, 1)", + "stateLayerPressed": "rgba(29, 27, 32, 0.1)", "surface": "rgba(254, 247, 255, 1)", "surfaceBright": "rgba(254, 247, 255, 1)", "surfaceContainer": "rgba(243, 237, 247, 1)", @@ -1159,7 +1154,6 @@ exports[`renders list section without subheader 1`] = ` "surfaceContainerLow": "rgba(247, 242, 250, 1)", "surfaceContainerLowest": "rgba(255, 255, 255, 1)", "surfaceDim": "rgba(222, 216, 225, 1)", - "surfaceDisabled": "rgba(29, 27, 32, 0.12)", "surfaceVariant": "rgba(231, 224, 236, 1)", "tertiary": "rgba(125, 82, 96, 1)", "tertiaryContainer": "rgba(255, 216, 228, 1)", diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index d3a7c1b1a1..2a09d12a10 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -36,7 +36,7 @@ exports[`renders menu with content styles 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -104,6 +104,9 @@ exports[`renders menu with content styles 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -259,7 +262,7 @@ exports[`renders menu with content styles 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "borderTopLeftRadius": 0, "borderTopRightRadius": 0, @@ -288,7 +291,7 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "borderTopLeftRadius": 0, "borderTopRightRadius": 0, @@ -362,6 +365,9 @@ exports[`renders menu with content styles 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -483,6 +489,9 @@ exports[`renders menu with content styles 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -590,7 +599,7 @@ exports[`renders not visible menu 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -658,6 +667,9 @@ exports[`renders not visible menu 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -755,7 +767,7 @@ exports[`renders visible menu 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderStyle": "solid", "borderWidth": 1, @@ -823,6 +835,9 @@ exports[`renders visible menu 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } @@ -978,7 +993,7 @@ exports[`renders visible menu 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "opacity": 0, "shadowColor": "#000", @@ -1005,7 +1020,7 @@ exports[`renders visible menu 1`] = ` pointerEvents="box-none" style={ { - "backgroundColor": "rgba(247, 242, 250, 1)", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "flex": undefined, "paddingVertical": 8, @@ -1077,6 +1092,9 @@ exports[`renders visible menu 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -1198,6 +1216,9 @@ exports[`renders visible menu 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index 069b8c854d..e879443bf9 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -59,6 +59,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -220,6 +223,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } @@ -381,6 +387,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -403,7 +412,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 24, }, [ @@ -466,7 +475,7 @@ exports[`Menu Item renders menu item 1`] = ` }, [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -542,6 +551,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 0.38, + }, undefined, ] } @@ -564,7 +576,7 @@ exports[`Menu Item renders menu item 1`] = ` style={ [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 24, }, [ @@ -627,7 +639,7 @@ exports[`Menu Item renders menu item 1`] = ` }, [ { - "color": "rgba(29, 27, 32, 0.38)", + "color": "rgba(29, 27, 32, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": "400", @@ -703,6 +715,9 @@ exports[`Menu Item renders menu item 1`] = ` { "flexDirection": "row", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index bbf1c420f7..1954a404ef 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -5,7 +5,7 @@ exports[`activity indicator snapshot test 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -23,7 +23,7 @@ exports[`activity indicator snapshot test 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -63,7 +63,7 @@ exports[`activity indicator snapshot test 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -140,35 +140,43 @@ exports[`activity indicator snapshot test 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -415,7 +423,7 @@ exports[`renders with placeholder 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -433,7 +441,7 @@ exports[`renders with placeholder 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -473,7 +481,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -550,35 +558,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -657,7 +673,7 @@ exports[`renders with placeholder 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -734,35 +750,43 @@ exports[`renders with placeholder 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + @@ -776,7 +800,7 @@ exports[`renders with text 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "shadowColor": "#000", "shadowOffset": { @@ -794,7 +818,7 @@ exports[`renders with text 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "rgba(243, 237, 247, 1)", + "backgroundColor": "rgba(236, 230, 240, 1)", "borderRadius": 28, "flex": undefined, "flexDirection": "row", @@ -834,7 +858,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -911,35 +935,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-icon" > - + - magnify - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + magnify + + @@ -1014,7 +1046,7 @@ exports[`renders with text 1`] = ` style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -1091,35 +1123,43 @@ exports[`renders with text 1`] = ` } testID="search-bar-clear-icon" > - + - close - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + close + + diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap index 914c9d8c8a..895061bb52 100644 --- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap @@ -91,6 +91,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] @@ -216,6 +217,7 @@ exports[`renders segmented button 1`] = ` "paddingVertical": 9, }, { + "opacity": 1, "paddingVertical": 9, }, ] diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 401868fabf..ce2a9c8637 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -410,6 +410,9 @@ exports[`renders snackbar with action button 1`] = ` "flexDirection": "row", "justifyContent": "center", }, + { + "opacity": 1, + }, undefined, ] } diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index 090fdaec66..0a7334fa12 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -21,6 +21,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -65,6 +66,9 @@ exports[`call onPress when affix adornment pressed 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -206,6 +210,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -278,6 +283,7 @@ exports[`call onPress when affix adornment pressed 1`] = ` [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -319,6 +325,7 @@ exports[`correctly applies a component as the text label 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -363,6 +370,9 @@ exports[`correctly applies a component as the text label 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -520,6 +530,7 @@ exports[`correctly applies a component as the text label 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -561,6 +572,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -605,6 +617,9 @@ exports[`correctly applies cursorColor prop 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -746,6 +761,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -787,6 +803,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -831,6 +848,9 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -972,6 +992,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1050,6 +1071,9 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1232,6 +1256,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingHorizontal": 16, "textAlign": "left", "textAlignVertical": "top", @@ -1272,6 +1297,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1316,6 +1342,9 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1457,6 +1486,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "left", @@ -1500,6 +1530,7 @@ exports[`correctly applies textAlign center 1`] = ` "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1544,6 +1575,9 @@ exports[`correctly applies textAlign center 1`] = ` { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1685,6 +1719,7 @@ exports[`correctly applies textAlign center 1`] = ` "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 16, "textAlign": "center", @@ -1726,6 +1761,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -1770,6 +1806,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -1911,6 +1950,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 16, "paddingRight": 56, "textAlign": "left", @@ -1952,6 +1992,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", @@ -1980,6 +2021,9 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "right": 16, "top": 16, @@ -2012,7 +2056,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2088,35 +2132,43 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm } testID="right-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2145,6 +2197,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "bottom": 0, "height": 1, "left": 0, + "opacity": 1, "position": "absolute", "right": 0, "transform": [ @@ -2189,6 +2242,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm { "zIndex": 3, }, + { + "opacity": 1, + }, ] } > @@ -2330,6 +2386,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "letterSpacing": 0.15, "lineHeight": undefined, "minWidth": 65, + "opacity": 1, "paddingLeft": 56, "paddingRight": 56, "textAlign": "left", @@ -2360,6 +2417,9 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "position": "absolute", "width": 24, }, + { + "opacity": 1, + }, { "left": 16, "top": 16, @@ -2392,7 +2452,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm style={ { "backgroundColor": "transparent", - "borderColor": "rgba(121, 116, 126, 1)", + "borderColor": "rgba(202, 196, 208, 1)", "borderRadius": 20, "borderWidth": 0, "elevation": 0, @@ -2468,35 +2528,43 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm } testID="left-icon-adornment" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -2522,6 +2590,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm [ { "color": "rgba(73, 69, 79, 1)", + "opacity": 1, }, { "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 0e475cd073..a8feb453e3 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -105,35 +105,43 @@ exports[`renders disabled toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -144,7 +152,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -164,7 +172,7 @@ exports[`renders toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(29, 25, 43, 0.12)", + "backgroundColor": "rgba(230, 224, 233, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -239,35 +247,43 @@ exports[`renders toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + @@ -278,7 +294,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderRadius": 4, "height": 42, "margin": 0, @@ -298,7 +314,7 @@ exports[`renders unchecked toggle button 1`] = ` collapsable={false} style={ { - "backgroundColor": "transparent", + "backgroundColor": "rgba(243, 237, 247, 1)", "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 4, "borderWidth": 0, @@ -378,35 +394,43 @@ exports[`renders unchecked toggle button 1`] = ` } testID="icon-button" > - + - heart - + [ + { + "lineHeight": 24, + "transform": [ + { + "scaleX": 1, + }, + ], + }, + { + "backgroundColor": "transparent", + }, + ], + ] + } + > + heart + + diff --git a/src/core/__tests__/theming.test.tsx b/src/core/__tests__/theming.test.tsx index 7b069cd482..f9efe7752e 100644 --- a/src/core/__tests__/theming.test.tsx +++ b/src/core/__tests__/theming.test.tsx @@ -91,7 +91,7 @@ describe('adaptNavigationTheme', () => { ...NavigationLightTheme.colors, primary: MD3LightTheme.colors.primary, background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, + card: MD3LightTheme.colors.surfaceContainer, text: MD3LightTheme.colors.onSurface, border: MD3LightTheme.colors.outline, notification: MD3LightTheme.colors.error, @@ -103,7 +103,7 @@ describe('adaptNavigationTheme', () => { ...NavigationDarkTheme.colors, primary: MD3DarkTheme.colors.primary, background: MD3DarkTheme.colors.background, - card: MD3DarkTheme.colors.elevation.level2, + card: MD3DarkTheme.colors.surfaceContainer, text: MD3DarkTheme.colors.onSurface, border: MD3DarkTheme.colors.outline, notification: MD3DarkTheme.colors.error, @@ -125,7 +125,7 @@ describe('adaptNavigationTheme', () => { ...NavigationLightTheme.colors, primary: colors.primary, background: colors.background, - card: colors.elevation.level2, + card: colors.surfaceContainer, text: colors.onSurface, border: colors.outline, notification: colors.error, @@ -146,7 +146,7 @@ describe('adaptNavigationTheme', () => { ...NavigationDarkTheme.colors, primary: colors.primary, background: colors.background, - card: colors.elevation.level2, + card: colors.surfaceContainer, text: colors.onSurface, border: colors.outline, notification: colors.error, @@ -167,7 +167,7 @@ describe('adaptNavigationTheme', () => { ...NavigationCustomLightTheme.colors, primary: colors.primary, background: colors.background, - card: colors.elevation.level2, + card: colors.surfaceContainer, text: colors.onSurface, border: colors.outline, notification: colors.error, @@ -191,7 +191,7 @@ describe('adaptNavigationTheme', () => { ...NavigationLightTheme.colors, primary: colors.primary, background: colors.background, - card: colors.elevation.level2, + card: colors.surfaceContainer, text: colors.onSurface, border: colors.outline, notification: colors.error, @@ -213,7 +213,7 @@ describe('adaptNavigationTheme', () => { ...NavigationDarkTheme.colors, primary: colors.primary, background: colors.background, - card: colors.elevation.level2, + card: colors.surfaceContainer, text: colors.onSurface, border: colors.outline, notification: colors.error, @@ -232,7 +232,7 @@ describe('adaptNavigationTheme', () => { ...NavigationThemeWithFonts.colors, primary: MD3LightTheme.colors.primary, background: MD3LightTheme.colors.background, - card: MD3LightTheme.colors.elevation.level2, + card: MD3LightTheme.colors.surfaceContainer, text: MD3LightTheme.colors.onSurface, border: MD3LightTheme.colors.outline, notification: MD3LightTheme.colors.error, diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 042a83d960..04649515c6 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -1,15 +1,9 @@ import type { ComponentType } from 'react'; import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; -import color from 'color'; import { MD3DarkTheme, MD3LightTheme } from '../styles/themes'; -import type { - InternalTheme, - MD3Theme, - MD3AndroidColors, - NavigationTheme, -} from '../types'; +import type { InternalTheme, MD3Theme, NavigationTheme } from '../types'; export const DefaultTheme = MD3LightTheme; @@ -105,7 +99,7 @@ const getAdaptedTheme = ( ...theme.colors, primary: materialTheme.colors.primary, background: materialTheme.colors.background, - card: materialTheme.colors.elevation.level2, + card: materialTheme.colors.surfaceContainer, text: materialTheme.colors.onSurface, border: materialTheme.colors.outline, notification: materialTheme.colors.error, @@ -142,19 +136,3 @@ const getAdaptedTheme = ( return base; }; - -export const getDynamicThemeElevations = (scheme: MD3AndroidColors) => { - const elevationValues = ['transparent', 0.05, 0.08, 0.11, 0.12, 0.14]; - return elevationValues.reduce((elevations, elevationValue, index) => { - return { - ...elevations, - [`level${index}`]: - index === 0 - ? elevationValue - : color(scheme.surface) - .mix(color(scheme.primary), elevationValue as number) - .rgb() - .string(), - }; - }, {}); -}; diff --git a/src/styles/themes/DynamicTheme.android.tsx b/src/styles/themes/DynamicTheme.android.tsx new file mode 100644 index 0000000000..b16b4bd040 --- /dev/null +++ b/src/styles/themes/DynamicTheme.android.tsx @@ -0,0 +1,502 @@ +import { Platform, PlatformColor } from 'react-native'; + +import { MD3DarkTheme } from './v3/DarkTheme'; +import { MD3LightTheme } from './v3/LightTheme'; +import type { MD3Theme } from '../../types'; + +const isApi34 = (Platform.Version as number) >= 34; +const isApi31 = (Platform.Version as number) >= 31; + +const ac = (name: string) => + PlatformColor(`@android:color/${name}`) as unknown as string; + +/** + * Picks the correct color value for the current Android API level. + * - API 34+: uses the named role resource (system_*_light/dark) + * - API 31-33: uses the tonal accent resource (system_accent*_NNN), or ref + * - API < 31: uses the reference palette string from the base theme + * @see https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md + */ +const pick = (api34: string, api31: string, ref: string): string => + isApi34 ? ac(api34) : isApi31 && api31 != null ? ac(api31) : ref; + +// Known limitation: surface/container roles on API 31-33 use +// @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a +// native DynamicColors setup). No @android:color/ equivalent exists for those +// slots. Reference palette values are used as fallback on API 31-33. + +const lightColors = { + primary: pick( + 'system_primary_light', + 'system_accent1_600', + MD3LightTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_light', + 'system_accent1_0', + MD3LightTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_light', + 'system_accent1_100', + MD3LightTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_light', + 'system_accent1_900', + MD3LightTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_dark', + 'system_accent1_200', + MD3LightTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_light', + 'system_accent2_600', + MD3LightTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_light', + 'system_accent2_0', + MD3LightTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_light', + 'system_accent2_100', + MD3LightTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_light', + 'system_accent2_900', + MD3LightTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_light', + 'system_accent3_600', + MD3LightTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_light', + 'system_accent3_0', + MD3LightTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_light', + 'system_accent3_100', + MD3LightTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_light', + 'system_accent3_900', + MD3LightTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_light', + MD3LightTheme.colors.error, + MD3LightTheme.colors.error + ), + onError: pick( + 'system_on_error_light', + MD3LightTheme.colors.onError, + MD3LightTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_light', + MD3LightTheme.colors.errorContainer, + MD3LightTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_light', + MD3LightTheme.colors.onErrorContainer, + MD3LightTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_light', + 'system_neutral1_900', + MD3LightTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_light', + 'system_neutral1_900', + MD3LightTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_light', + 'system_neutral2_700', + MD3LightTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_light', + 'system_neutral2_500', + MD3LightTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_light', + 'system_neutral2_200', + MD3LightTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_dark', + 'system_neutral1_800', + MD3LightTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_50', + MD3LightTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_light', + 'system_neutral2_0', + MD3LightTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_light', + MD3LightTheme.colors.surfaceContainerLow, + MD3LightTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_light', + 'system_neutral2_100', + MD3LightTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_light', + MD3LightTheme.colors.surface, + MD3LightTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_light', + MD3LightTheme.colors.surfaceDim, + MD3LightTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_light', + MD3LightTheme.colors.surfaceBright, + MD3LightTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_light', + MD3LightTheme.colors.surfaceContainer, + MD3LightTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_light', + MD3LightTheme.colors.surfaceContainerHigh, + MD3LightTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_light', + MD3LightTheme.colors.background, + MD3LightTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_light', + MD3LightTheme.colors.surfaceVariant, + MD3LightTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + MD3LightTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + MD3LightTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + MD3LightTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + MD3LightTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + MD3LightTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + MD3LightTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + MD3LightTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + MD3LightTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + MD3LightTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + MD3LightTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + MD3LightTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + MD3LightTheme.colors.onTertiaryFixedVariant + ), +}; + +const darkColors = { + primary: pick( + 'system_primary_dark', + 'system_accent1_200', + MD3DarkTheme.colors.primary + ), + onPrimary: pick( + 'system_on_primary_dark', + 'system_accent1_800', + MD3DarkTheme.colors.onPrimary + ), + primaryContainer: pick( + 'system_primary_container_dark', + 'system_accent1_700', + MD3DarkTheme.colors.primaryContainer + ), + onPrimaryContainer: pick( + 'system_on_primary_container_dark', + 'system_accent1_100', + MD3DarkTheme.colors.onPrimaryContainer + ), + inversePrimary: pick( + 'system_primary_light', + 'system_accent1_600', + MD3DarkTheme.colors.inversePrimary + ), + secondary: pick( + 'system_secondary_dark', + 'system_accent2_200', + MD3DarkTheme.colors.secondary + ), + onSecondary: pick( + 'system_on_secondary_dark', + 'system_accent2_800', + MD3DarkTheme.colors.onSecondary + ), + secondaryContainer: pick( + 'system_secondary_container_dark', + 'system_accent2_700', + MD3DarkTheme.colors.secondaryContainer + ), + onSecondaryContainer: pick( + 'system_on_secondary_container_dark', + 'system_accent2_100', + MD3DarkTheme.colors.onSecondaryContainer + ), + tertiary: pick( + 'system_tertiary_dark', + 'system_accent3_200', + MD3DarkTheme.colors.tertiary + ), + onTertiary: pick( + 'system_on_tertiary_dark', + 'system_accent3_800', + MD3DarkTheme.colors.onTertiary + ), + tertiaryContainer: pick( + 'system_tertiary_container_dark', + 'system_accent3_700', + MD3DarkTheme.colors.tertiaryContainer + ), + onTertiaryContainer: pick( + 'system_on_tertiary_container_dark', + 'system_accent3_100', + MD3DarkTheme.colors.onTertiaryContainer + ), + error: pick( + 'system_error_dark', + MD3DarkTheme.colors.error, + MD3DarkTheme.colors.error + ), + onError: pick( + 'system_on_error_dark', + MD3DarkTheme.colors.onError, + MD3DarkTheme.colors.onError + ), + errorContainer: pick( + 'system_error_container_dark', + MD3DarkTheme.colors.errorContainer, + MD3DarkTheme.colors.errorContainer + ), + onErrorContainer: pick( + 'system_on_error_container_dark', + MD3DarkTheme.colors.onErrorContainer, + MD3DarkTheme.colors.onErrorContainer + ), + onSurface: pick( + 'system_on_surface_dark', + 'system_neutral1_100', + MD3DarkTheme.colors.onSurface + ), + onBackground: pick( + 'system_on_background_dark', + 'system_neutral1_100', + MD3DarkTheme.colors.onBackground + ), + onSurfaceVariant: pick( + 'system_on_surface_variant_dark', + 'system_neutral2_200', + MD3DarkTheme.colors.onSurfaceVariant + ), + outline: pick( + 'system_outline_dark', + 'system_neutral2_400', + MD3DarkTheme.colors.outline + ), + outlineVariant: pick( + 'system_outline_variant_dark', + 'system_neutral2_700', + MD3DarkTheme.colors.outlineVariant + ), + inverseSurface: pick( + 'system_surface_light', + 'system_neutral1_100', + MD3DarkTheme.colors.inverseSurface + ), + inverseOnSurface: pick( + 'system_on_surface_light', + 'system_neutral1_800', + MD3DarkTheme.colors.inverseOnSurface + ), + surfaceContainerLowest: pick( + 'system_surface_container_lowest_dark', + MD3DarkTheme.colors.surfaceContainerLowest, + MD3DarkTheme.colors.surfaceContainerLowest + ), + surfaceContainerLow: pick( + 'system_surface_container_low_dark', + 'system_neutral2_900', + MD3DarkTheme.colors.surfaceContainerLow + ), + surfaceContainerHighest: pick( + 'system_surface_container_highest_dark', + MD3DarkTheme.colors.surfaceContainerHighest, + MD3DarkTheme.colors.surfaceContainerHighest + ), + surface: pick( + 'system_surface_dark', + MD3DarkTheme.colors.surface, + MD3DarkTheme.colors.surface + ), + surfaceDim: pick( + 'system_surface_dim_dark', + MD3DarkTheme.colors.surfaceDim, + MD3DarkTheme.colors.surfaceDim + ), + surfaceBright: pick( + 'system_surface_bright_dark', + MD3DarkTheme.colors.surfaceBright, + MD3DarkTheme.colors.surfaceBright + ), + surfaceContainer: pick( + 'system_surface_container_dark', + MD3DarkTheme.colors.surfaceContainer, + MD3DarkTheme.colors.surfaceContainer + ), + surfaceContainerHigh: pick( + 'system_surface_container_high_dark', + MD3DarkTheme.colors.surfaceContainerHigh, + MD3DarkTheme.colors.surfaceContainerHigh + ), + background: pick( + 'system_background_dark', + MD3DarkTheme.colors.background, + MD3DarkTheme.colors.background + ), + surfaceVariant: pick( + 'system_surface_variant_dark', + MD3DarkTheme.colors.surfaceVariant, + MD3DarkTheme.colors.surfaceVariant + ), + primaryFixed: pick( + 'system_primary_fixed', + 'system_accent1_100', + MD3DarkTheme.colors.primaryFixed + ), + primaryFixedDim: pick( + 'system_primary_fixed_dim', + 'system_accent1_200', + MD3DarkTheme.colors.primaryFixedDim + ), + onPrimaryFixed: pick( + 'system_on_primary_fixed', + 'system_accent1_900', + MD3DarkTheme.colors.onPrimaryFixed + ), + onPrimaryFixedVariant: pick( + 'system_on_primary_fixed_variant', + 'system_accent1_700', + MD3DarkTheme.colors.onPrimaryFixedVariant + ), + secondaryFixed: pick( + 'system_secondary_fixed', + 'system_accent2_100', + MD3DarkTheme.colors.secondaryFixed + ), + secondaryFixedDim: pick( + 'system_secondary_fixed_dim', + 'system_accent2_200', + MD3DarkTheme.colors.secondaryFixedDim + ), + onSecondaryFixed: pick( + 'system_on_secondary_fixed', + 'system_accent2_900', + MD3DarkTheme.colors.onSecondaryFixed + ), + onSecondaryFixedVariant: pick( + 'system_on_secondary_fixed_variant', + 'system_accent2_700', + MD3DarkTheme.colors.onSecondaryFixedVariant + ), + tertiaryFixed: pick( + 'system_tertiary_fixed', + 'system_accent3_100', + MD3DarkTheme.colors.tertiaryFixed + ), + tertiaryFixedDim: pick( + 'system_tertiary_fixed_dim', + 'system_accent3_200', + MD3DarkTheme.colors.tertiaryFixedDim + ), + onTertiaryFixed: pick( + 'system_on_tertiary_fixed', + 'system_accent3_900', + MD3DarkTheme.colors.onTertiaryFixed + ), + onTertiaryFixedVariant: pick( + 'system_on_tertiary_fixed_variant', + 'system_accent3_700', + MD3DarkTheme.colors.onTertiaryFixedVariant + ), +}; + +export const DynamicLightTheme: MD3Theme = { + ...MD3LightTheme, + colors: { ...MD3LightTheme.colors, ...lightColors }, +}; + +export const DynamicDarkTheme: MD3Theme = { + ...MD3DarkTheme, + colors: { ...MD3DarkTheme.colors, ...darkColors }, +}; diff --git a/src/styles/themes/DynamicTheme.tsx b/src/styles/themes/DynamicTheme.tsx new file mode 100644 index 0000000000..6669c63a45 --- /dev/null +++ b/src/styles/themes/DynamicTheme.tsx @@ -0,0 +1,2 @@ +export { MD3DarkTheme as MD3DynamicDarkTheme } from './v3/DarkTheme'; +export { MD3LightTheme as MD3DynamicLightTheme } from './v3/LightTheme'; diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 39bcb6648c..f992ef7e73 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,2 +1,3 @@ export { MD3LightTheme } from './v3/LightTheme'; export { MD3DarkTheme } from './v3/DarkTheme'; +export { DynamicLightTheme, DynamicDarkTheme } from './DynamicTheme'; diff --git a/src/styles/themes/v3/DarkTheme.tsx b/src/styles/themes/v3/DarkTheme.tsx index a8dd709faf..c8e21e8d46 100644 --- a/src/styles/themes/v3/DarkTheme.tsx +++ b/src/styles/themes/v3/DarkTheme.tsx @@ -1,10 +1,10 @@ import color from 'color'; import { MD3LightTheme } from './LightTheme'; -import { MD3Colors, tokens } from './tokens'; +import { tokens } from './tokens'; import type { MD3Theme } from '../../../types'; -const { palette, opacity } = tokens.md.ref; +const { palette, stateOpacity } = tokens.md.ref; export const MD3DarkTheme: MD3Theme = { ...MD3LightTheme, @@ -28,10 +28,6 @@ export const MD3DarkTheme: MD3Theme = { surfaceContainerHigh: palette.neutral17, surfaceContainerHighest: palette.neutral22, surfaceVariant: palette.neutralVariant30, - surfaceDisabled: color(palette.neutral90) - .alpha(opacity.level2) - .rgb() - .string(), background: palette.neutral6, error: palette.error80, errorContainer: palette.error30, @@ -43,10 +39,6 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryContainer: palette.tertiary90, onSurface: palette.neutral90, onSurfaceVariant: palette.neutralVariant80, - onSurfaceDisabled: color(palette.neutral90) - .alpha(opacity.level4) - .rgb() - .string(), onError: palette.error20, onErrorContainer: palette.error80, onBackground: palette.neutral90, @@ -69,12 +61,15 @@ export const MD3DarkTheme: MD3Theme = { onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), + stateLayerPressed: color(palette.neutral90) + .alpha(stateOpacity.pressed) + .rgb() + .string(), elevation: { level0: 'transparent', - level1: palette.neutral4, - level2: palette.neutral10, - level3: palette.neutral12, + level1: palette.neutral10, + level2: palette.neutral12, + level3: palette.neutral17, level4: palette.neutral17, level5: palette.neutral22, }, diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx index c7b32d6013..da0ece6476 100644 --- a/src/styles/themes/v3/LightTheme.tsx +++ b/src/styles/themes/v3/LightTheme.tsx @@ -1,10 +1,10 @@ import color from 'color'; -import { MD3Colors, tokens } from './tokens'; +import { tokens } from './tokens'; import type { MD3Theme } from '../../../types'; import configureFonts from '../../fonts'; -const { palette, opacity } = tokens.md.ref; +const { palette, stateOpacity } = tokens.md.ref; export const MD3LightTheme: MD3Theme = { dark: false, @@ -27,10 +27,6 @@ export const MD3LightTheme: MD3Theme = { surfaceContainerHigh: palette.neutral92, surfaceContainerHighest: palette.neutral90, surfaceVariant: palette.neutralVariant90, - surfaceDisabled: color(palette.neutral10) - .alpha(opacity.level2) - .rgb() - .string(), background: palette.neutral98, error: palette.error40, errorContainer: palette.error90, @@ -42,10 +38,6 @@ export const MD3LightTheme: MD3Theme = { onTertiaryContainer: palette.tertiary10, onSurface: palette.neutral10, onSurfaceVariant: palette.neutralVariant30, - onSurfaceDisabled: color(palette.neutral10) - .alpha(opacity.level4) - .rgb() - .string(), onError: palette.error100, onErrorContainer: palette.error10, onBackground: palette.neutral10, @@ -68,12 +60,15 @@ export const MD3LightTheme: MD3Theme = { onTertiaryFixedVariant: palette.tertiary30, shadow: palette.neutral0, scrim: palette.neutral0, - backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(), + stateLayerPressed: color(palette.neutral10) + .alpha(stateOpacity.pressed) + .rgb() + .string(), elevation: { level0: 'transparent', - level1: palette.neutral100, - level2: palette.neutral96, - level3: palette.neutral94, + level1: palette.neutral96, + level2: palette.neutral94, + level3: palette.neutral92, level4: palette.neutral92, level5: palette.neutral90, }, diff --git a/src/styles/themes/v3/tokens.tsx b/src/styles/themes/v3/tokens.tsx index 6eb27445fd..12486aca53 100644 --- a/src/styles/themes/v3/tokens.tsx +++ b/src/styles/themes/v3/tokens.tsx @@ -116,12 +116,19 @@ const ref = { weightMedium: '500' as Font['fontWeight'], }, - opacity: { - level1: 0.08, - level2: 0.12, - level3: 0.16, - level4: 0.38, + /** State layers opacity + * @see https://m3.material.io/foundations/interaction/states/state-layers + */ + stateOpacity: { + dragged: 0.16, + pressed: 0.1, + focus: 0.1, + hover: 0.08, + disabled: 0.38, + enabled: 1.0, }, + + scrimAlpha: 0.32, }; const regularType = { diff --git a/src/types.tsx b/src/types.tsx index d8d0e81125..fc10abf1a7 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -44,7 +44,6 @@ export type MD3Colors = { surfaceContainerHigh: string; surfaceContainerHighest: string; surfaceVariant: string; - surfaceDisabled: string; background: string; error: string; errorContainer: string; @@ -56,7 +55,6 @@ export type MD3Colors = { onTertiaryContainer: string; onSurface: string; onSurfaceVariant: string; - onSurfaceDisabled: string; onError: string; onErrorContainer: string; onBackground: string; @@ -79,44 +77,15 @@ export type MD3Colors = { onTertiaryFixedVariant: string; shadow: string; scrim: string; - backdrop: string; + /** Pre-computed state layer color at press opacity (0.10). + * Used for ripple effects. Avoids runtime alpha manipulation + * which is incompatible with PlatformColor on Android. + * TODO: revisit after https://github.com/facebook/react-native/pull/56395 + * @see https://m3.material.io/foundations/interaction/states/state-layers */ + stateLayerPressed: string; elevation: MD3ElevationColors; }; -export type MD3AndroidColors = { - primary: number; - primaryContainer: number; - secondary: number; - secondaryContainer: number; - tertiary: number; - tertiaryContainer: number; - surface: number; - surfaceVariant: number; - background: number; - error: number; - errorContainer: number; - onPrimary: number; - onPrimaryContainer: number; - onSecondary: number; - onSecondaryContainer: number; - onTertiary: number; - onTertiaryContainer: number; - onSurface: number; - onSurfaceVariant: number; - onError: number; - onErrorContainer: number; - onBackground: number; - outline: number; - outlineVariant: number; - inverseSurface: number; - inverseOnSurface: number; - inversePrimary: number; - shadow: number; - scrim: number; -}; - -export type MD3Palette = {}; - export type ThemeProp = $DeepPartial; export type ThemeBase = { diff --git a/yarn.lock b/yarn.lock index 3920e64583..9696c756fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3887,13 +3887,6 @@ __metadata: languageName: node linkType: hard -"@material/material-color-utilities@npm:^0.2.7": - version: 0.2.7 - resolution: "@material/material-color-utilities@npm:0.2.7" - checksum: 10c0/7734f8d7cffe6a92d47fcca82b4846e39ffd79be9c057f3299466696dcdee5379b8a8a3aa6a9692d40bd6900905f689105d9a8ce47882ab22348df10621f70cd - languageName: node - linkType: hard - "@mdx-js/mdx@npm:^0.20.3": version: 0.20.3 resolution: "@mdx-js/mdx@npm:0.20.3" @@ -4317,20 +4310,6 @@ __metadata: languageName: node linkType: hard -"@pchmn/expo-material3-theme@npm:^1.3.2": - version: 1.3.2 - resolution: "@pchmn/expo-material3-theme@npm:1.3.2" - dependencies: - "@material/material-color-utilities": "npm:^0.2.7" - color: "npm:^4.2.3" - peerDependencies: - expo: "*" - react: "*" - react-native: "*" - checksum: 10c0/89aa0a65b04f4a7f709c35bbdc2f7830dff73e0335877d36a091c55fb174ce82e4b2c67690657978b03fc563ab4c20565ded0ed7faec94d0a384a9c5085dfe19 - languageName: node - linkType: hard - "@polka/url@npm:^1.0.0-next.24": version: 1.0.0-next.29 resolution: "@polka/url@npm:1.0.0-next.29" @@ -20063,7 +20042,6 @@ __metadata: "@babel/core": "npm:^7.25.2" "@expo/vector-icons": "npm:^15.0.2" "@expo/webpack-config": "npm:~19.0.1" - "@pchmn/expo-material3-theme": "npm:^1.3.2" "@react-native-async-storage/async-storage": "npm:2.2.0" "@react-native-masked-view/masked-view": "npm:0.3.2" "@react-navigation/bottom-tabs": "npm:^7.3.10"