diff --git a/docs/docs/guides/01-getting-started.md b/docs/docs/guides/01-getting-started.md index 68071c4d25..19fc3c2dea 100644 --- a/docs/docs/guides/01-getting-started.md +++ b/docs/docs/guides/01-getting-started.md @@ -165,7 +165,3 @@ export default function Main() { ); } ``` - -:::note -For MD2 check the following [Material Design 2 default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/themes/v2/LightTheme.tsx). -::: diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx index 76869182ae..beeb8bfaff 100644 --- a/docs/docs/guides/02-theming.mdx +++ b/docs/docs/guides/02-theming.mdx @@ -65,9 +65,7 @@ You can change the theme prop dynamically and all the components will automatica A theme usually contains the following properties: - `dark` (`boolean`): whether this is a dark theme or light theme. -- `version`: specify which design system components should follow in the app - - 3 - new Material You (MD3) - - 2 - previous Material Design (MD2) +- `version`: Material You (MD3); kept for compatibility and normalized to `3` by `PaperProvider` - `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)). - `roundness` (`number`): roundness of common elements, such as buttons. - `colors` (`object`): various colors used throughout different elements. @@ -471,111 +469,13 @@ export default function HomeScreen() { } ``` -## Material Design 2 +## Material Design 3 -Using Material Design 2 is fully supported in React Native Paper v5.x. +React Native Paper ships with Material Design 3 (Material You) only. Customize the default experience by extending `MD3LightTheme` or `MD3DarkTheme` (see [Extending the theme](#extending-the-theme) and [Advanced theme overrides](#advanced-theme-overrides)). -### Simple setup +### Migrating from Material Design 2 -In order to use the Material Design 2 theme you can just pass `{ version: 2 }` to the PaperProvider theme prop: - -```js -import * as React from 'react'; -import { PaperProvider } from 'react-native-paper'; -import App from './src/App'; - -export default function Main() { - return ( - - - - ); -} -``` - -Specifying `{ version: 2 }` tells React Native Paper to use the built in Material Design 2 theme, so you don't have to fully extend it on your own. - -### Advanced setup - -As with any theme, you can also specify your custom properties within the Material Design 2 theme: - -```js -import * as React from 'react'; -import { MD2LightTheme, PaperProvider } from 'react-native-paper'; -import App from './src/App'; - -export default function Main() { - const theme = { - ...MD2LightTheme, - - // Specify a custom property - custom: 'property', - - // Specify a custom nested property - colors: { - ...MD2LightTheme.colors, - primary: '#fefefe', - }, - }; - - return ( - - - - ); -} -``` - -### Typescript - -Due to the amount of changes in the theme's schema shape it falls into the [Advanced theme overrides](#advanced-theme-overrides) category. The steps are identical as with any advanced theme, just make sure to extend the built-in `MD2LightTheme` or `MD2DarkTheme` instead of `MD3LightTheme` or `MD3DarkTheme`. - -The final example for Material Design 2 would look like this: - -```ts -import * as React from 'react'; -import { MD2LightTheme, PaperProvider, useTheme } from 'react-native-paper'; -import App from './src/App'; - -const theme = { - // Extend Material Design 2 theme - - ...MD2LightTheme, // or MD2DarkTheme - - // Specify a custom property - myOwnProperty: true, - - // Specify a custom nested property - colors: { - ...MD2LightTheme.colors, - myOwnColor: '#BADA55', - }, -}; - -export type AppTheme = typeof theme; - -export const useAppTheme = () => useTheme(); - -export default function Main() { - return ( - - - - ); -} - -// App.tsx - -export default function App() { - const { theme } = useAppTheme(); - - return ; -} -``` - -### Migrating to Material You - -If you are migrating from Material Design 2 (4.x and lower) to Material You (5.x), please refer to our [Migration Guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0) +If you are upgrading from Material Design 2 (4.x and lower), follow the [Migration Guide](https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0). ## Applying a theme to a paper component diff --git a/docs/docs/guides/04-fonts.md b/docs/docs/guides/04-fonts.md index 60d3c6e457..5e8e435c0a 100644 --- a/docs/docs/guides/04-fonts.md +++ b/docs/docs/guides/04-fonts.md @@ -47,99 +47,8 @@ Now, you are able to use `fontFamily` from font files. ## Configuring fonts in ThemeProvider -### Material Design 2 - -#### Using `configureFonts` helper - -To create a custom font, prepare a `fontConfig` object where fonts are divided by platforms. After that, you have to: - -* pass the `fontConfig` into `configureFonts` params object property called `config` -* set the params object property `isV3` to `false`. - -The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and `native`. Use these to override fonts on particular platforms. - -:::info -At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`. -::: - -```js -import * as React from 'react'; -import { configureFonts, MD2LightTheme, PaperProvider } from 'react-native-paper'; -import App from './src/App'; - -const fontConfig = { - web: { - regular: { - fontFamily: 'sans-serif', - fontWeight: 'normal', - }, - medium: { - fontFamily: 'sans-serif-medium', - fontWeight: 'normal', - }, - light: { - fontFamily: 'sans-serif-light', - fontWeight: 'normal', - }, - thin: { - fontFamily: 'sans-serif-thin', - fontWeight: 'normal', - }, - }, - ios: { - regular: { - fontFamily: 'sans-serif', - fontWeight: 'normal', - }, - medium: { - fontFamily: 'sans-serif-medium', - fontWeight: 'normal', - }, - light: { - fontFamily: 'sans-serif-light', - fontWeight: 'normal', - }, - thin: { - fontFamily: 'sans-serif-thin', - fontWeight: 'normal', - }, - }, - android: { - regular: { - fontFamily: 'sans-serif', - fontWeight: 'normal', - }, - medium: { - fontFamily: 'sans-serif-medium', - fontWeight: 'normal', - }, - light: { - fontFamily: 'sans-serif-light', - fontWeight: 'normal', - }, - thin: { - fontFamily: 'sans-serif-thin', - fontWeight: 'normal', - }, - } -}; - -const theme = { - ...MD2LightTheme, - fonts: configureFonts({config: fontConfig, isV3: false}), -}; - -export default function Main() { - return ( - - - - ); -} -``` - -:::tip -If you're using TypeScript use `as const` when defining `fontConfig`. +:::note +Older Material Design 2 platform-split font configuration (`configureFonts` with per-platform `ios` / `android` / `web` keys) is no longer supported. Use the Material Design 3 typescale and `configureFonts` as documented below. ::: ### Material Design 3 diff --git a/docs/docs/guides/08-theming-with-react-navigation.md b/docs/docs/guides/08-theming-with-react-navigation.md index 6003953c02..15dbfbbec6 100644 --- a/docs/docs/guides/08-theming-with-react-navigation.md +++ b/docs/docs/guides/08-theming-with-react-navigation.md @@ -11,25 +11,9 @@ But how to make them work together? ## Themes adaptation -### Material Design 2 - -Fortunately, in Material Design 2, both React Navigation and React Native Paper offer very similar API when it comes to theming and theme color structure. It's possible to import them in light and dark variants from both. - -```js -import { - DarkTheme as NavigationDarkTheme, - DefaultTheme as NavigationDefaultTheme, -} from '@react-navigation/native'; - -import { - MD2LightTheme, - MD2DarkTheme, -} from 'react-native-paper'; -``` - ### Material Design 3 -From v5, React Native Paper theme colors structure follows the Material Design 3 (known as Material You) colors system, which differs significantly from both the previous Paper's theme and React Navigation theme. +React Native Paper follows the Material Design 3 (Material You) color system, which differs from React Navigation’s default theme shape. However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3. @@ -127,24 +111,6 @@ To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepm npm install deepmerge ``` -### Material Design 2 - -```js -import { - NavigationContainer, - DarkTheme as NavigationDarkTheme, - DefaultTheme as NavigationDefaultTheme, -} from '@react-navigation/native'; -import { - MD2DarkTheme, - MD2LightTheme, -} from 'react-native-paper'; -import merge from 'deepmerge'; - -const CombinedDefaultTheme = merge(MD2LightTheme, NavigationDefaultTheme); -const CombinedDarkTheme = merge(MD2DarkTheme, NavigationDarkTheme); -``` - ### Material Design 3 ```js @@ -171,27 +137,6 @@ const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme); Alternatively, we could merge those themes using vanilla JavaScript: -### Material Design 2 - -```js -const CombinedDefaultTheme = { - ...MD2LightTheme, - ...NavigationDefaultTheme, - colors: { - ...MD2LightTheme.colors, - ...NavigationDefaultTheme.colors, - }, -}; -const CombinedDarkTheme = { - ...MD2DarkTheme, - ...NavigationDarkTheme, - colors: { - ...MD2DarkTheme.colors, - ...NavigationDarkTheme.colors, - }, -}; -``` - ### Material Design 3 ```js diff --git a/docs/docs/guides/10-migration-guide-to-5.0.md b/docs/docs/guides/10-migration-guide-to-5.0.md index 6c358d387f..7631b8cf94 100644 --- a/docs/docs/guides/10-migration-guide-to-5.0.md +++ b/docs/docs/guides/10-migration-guide-to-5.0.md @@ -4,7 +4,7 @@ title: Introducing v5 with Material You React Native Paper v5 is all about adopting the new Material Design 3 aka Material You. It was released in October 2021 after intense work and effort to make Material You follow a more expressive approach to design. -Paper now supports both Material Design 2 and 3 through the configuration described in [Versioning](#versioning) and is compatible with a handful of API changes. +Current releases use Material Design 3 only; the historical `version: 2` / MD2 theme APIs described below were removed after v5. Use this guide when upgrading older apps to MD3. # Migration guide to Material You 5.0 @@ -36,15 +36,12 @@ npx pod-install ### Versioning -Introducing Material You (MD3) into `react-native-paper` doesn't mean dropping previous Material Design (MD2)! On the contrary, both of them will be supported, however, not simultaneously. To specify which design system components should follow in the app, there is a newly created property in [the theme](https://callstack.github.io/react-native-paper/docs/guides/theming#theme-properties) named `version` that accepts one of two values: - -* 3 – (default) new Material You (MD3), -* 2 - previous Material Design (MD2). +In v5, Material You (MD3) became the default theme. Earlier releases also exposed `version: 2` for Material Design 2; that option and MD2 theme exports have since been removed—use MD3 themes (`MD3LightTheme` / `MD3DarkTheme`) only. ```js theme: { /* ... */ - version: 3 | 2 + version: 3 } ``` @@ -166,35 +163,13 @@ Take a look at the suggested replacement diff: ### Configure fonts -The existing utility called `configureFonts` was adjusted to help users configure their theme fonts in both version, that's why that function, as of today, is going to accept the object with the follwing properties as an argument: +The `configureFonts` helper configures the Material Design 3 typescale. Pass overrides via the `config` object (see [Fonts](https://callstack.github.io/react-native-paper/docs/guides/fonts.html)). ```ts -configureFonts(params) -``` - -Parameters: - -| NAME | TYPE | REQUIRED | -| ----------- | ----------- | ----------- | -| params | object | No | - -Valid `params` keys are: - - * `config` ([MD2FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L63) | [MD3FontsConfig](https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx#L67)) - fonts config object appropriate to the MD version - * `isV3` (boolean) - whether adjusting theme fonts for v3. Default it true. - -To use your current font config from v2 and migrate to v3 there are two requirements: -* the font config previously passed directly into function has to be passed into the params object property called `config` -* the params object property `isV3` has to be set to `false` - -```diff -- configureFonts(fontConfig) -+ configureFonts({config: fontConfig, isV3: false}) +configureFonts({ config: { bodyLarge: { fontFamily: 'System' } } }) ``` -:::tip -If you want to check how to use `configureFonts` on MD3, check the [Fonts](https://callstack.github.io/react-native-paper/docs/guides/fonts.html) guide. -::: +Older direct calls like `configureFonts(fontConfig)` and MD2 platform-split configs should be replaced with MD3 variant keys (`displayLarge`, `bodyMedium`, and so on). ## Components diff --git a/docs/static/llms.txt b/docs/static/llms.txt index 46da789d41..4029ace3ea 100644 --- a/docs/static/llms.txt +++ b/docs/static/llms.txt @@ -7,7 +7,7 @@ - Install: npm install react-native-paper react-native-safe-area-context - Wrap your app with PaperProvider -- Default theme is Material You (MD3); set theme.version: 2 for MD2 +- Default theme is Material You (MD3) - Requires React Native 0.72+ and React 18+ ## Guides @@ -63,7 +63,7 @@ - Theme object accepts colors, dark, roundness, fonts, animation, and version properties - Use useTheme() hook or ThemeProvider for nested theme overrides -- MD3 (Material You) is the default; set version: 2 for MD2 compatibility +- MD3 (Material You) is the only supported design system; extend MD3LightTheme / MD3DarkTheme - See theming guide: https://callstack.github.io/react-native-paper/docs/guides/theming ## Provider Pattern diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 2d3ca6c202..2a31565f67 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -9,7 +9,6 @@ import { Button, Dialog, Drawer, - MD2Colors, MD3Colors, Switch, Text, @@ -107,7 +106,6 @@ function DrawerItems() { toggleShouldUseDeviceColors, toggleTheme, toggleRtl: toggleRTL, - toggleThemeVersion, toggleCollapsed, toggleCustomFont, toggleRippleEffect, @@ -137,14 +135,10 @@ function DrawerItems() { }; const coloredLabelTheme = { - colors: isV3 - ? { - secondaryContainer: MD3Colors.tertiary80, - onSecondaryContainer: MD3Colors.tertiary20, - } - : { - primary: MD2Colors.tealA200, - }, + colors: { + secondaryContainer: MD3Colors.tertiary80, + onSecondaryContainer: MD3Colors.tertiary20, + }, }; return ( @@ -217,15 +211,6 @@ function DrawerItems() { )} - - - MD 2 - - - - - - {isV3 && ( diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx index 8013142921..15686054fa 100644 --- a/example/src/Examples/ActivityIndicatorExample.tsx +++ b/example/src/Examples/ActivityIndicatorExample.tsx @@ -1,20 +1,12 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - ActivityIndicator, - FAB, - List, - MD2Colors, - MD3Colors, -} from 'react-native-paper'; +import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ActivityIndicatorExample = () => { const [animating, setAnimating] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => { diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx index 4bffa05322..f9b2303fad 100644 --- a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx +++ b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx @@ -3,13 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'; import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native'; import Icon from '@expo/vector-icons/MaterialCommunityIcons'; -import { - Avatar, - MD2Colors, - MD3Colors, - Paragraph, - Text, -} from 'react-native-paper'; +import { Avatar, MD3Colors, Text } from 'react-native-paper'; import CustomFAB from './CustomFAB'; import CustomFABControls, { @@ -32,7 +26,7 @@ type Item = { }; const AnimatedFABExample = () => { - const { colors, isV3 } = useExampleTheme(); + const { colors } = useExampleTheme(); const isIOS = Platform.OS === 'ios'; @@ -47,63 +41,55 @@ const AnimatedFABExample = () => { const renderItem = React.useCallback( ({ item }: { item: Item }) => { - const TextComponent = isV3 ? Text : Paragraph; - return ( - {item.sender} - - + {item.date} - + - {item.header} - - + {item.message} - + setVisible(!visible)} @@ -114,7 +100,7 @@ const AnimatedFABExample = () => { ); }, - [visible, isV3] + [visible] ); const onScroll = ({ diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx index 1ebe74bad5..a5b1042ea5 100644 --- a/example/src/Examples/AppbarExample.tsx +++ b/example/src/Examples/AppbarExample.tsx @@ -6,7 +6,7 @@ import { Appbar, FAB, List, - Paragraph, + MD3Colors, RadioButton, Snackbar, Switch, @@ -14,7 +14,6 @@ import { } from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { yellowA200 } from '../../../src/styles/themes/v2/colors'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -41,7 +40,7 @@ const AppbarExample = ({ navigation }: Props) => { const theme = useExampleTheme(); const { bottom, left, right } = useSafeAreaInsets(); - const height = theme.isV3 ? 80 : 56; + const height = 80; const isCenterAlignedMode = appbarMode === 'center-aligned'; @@ -92,21 +91,14 @@ const AppbarExample = ({ navigation }: Props) => { showElevated, ]); - const TextComponent = theme.isV3 ? Text : Paragraph; - const renderFAB = () => { return ( {}} - style={[ - styles.fab, - theme.isV3 - ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 } - : { bottom: height / 2 + bottom }, - ]} + style={[styles.fab, { top: (height - MEDIUM_FAB_HEIGHT) / 2 }]} /> ); }; @@ -114,49 +106,41 @@ const AppbarExample = ({ navigation }: Props) => { const renderDefaultOptions = () => ( <> - Left icon + Left icon - {!theme.isV3 && ( - - Subtitle - - - )} - Search icon + Subtitle + + + + Search icon - More icon + More icon - {theme.isV3 && ( - - Calendar icon - - - )} - Custom Color + Calendar icon + + + + Custom Color - {!theme.isV3 && ( - - Exact Dark Theme - - - )} - {theme.isV3 && ( - - Elevated - - - )} + + Exact Dark Theme + + + + Elevated + + ); @@ -166,40 +150,34 @@ const AppbarExample = ({ navigation }: Props) => { style={{ marginBottom: height + bottom }} contentContainerStyle={styles.contentContainer} > - {theme.isV3 ? ( - - {renderDefaultOptions()} - - ) : ( - renderDefaultOptions() - )} - {theme.isV3 && ( - - - setAppbarMode(value as AppbarModes) - } - > - - Small (default) - - - - Medium - - - - Large - - - - Center-aligned - - - - - )} + + {renderDefaultOptions()} + + + + setAppbarMode(value as AppbarModes) + } + > + + Small (default) + + + + Medium + + + + Large + + + + Center-aligned + + + + { { height: height + bottom, }, - theme.isV3 && { + { backgroundColor: theme.colors.elevation.level2, }, ]} @@ -218,9 +196,8 @@ const AppbarExample = ({ navigation }: Props) => { {}} /> {}} /> {}} /> - {theme.isV3 && renderFAB()} + {renderFAB()} - {!theme.isV3 && renderFAB()} setShowSnackbar(false)} @@ -258,6 +235,6 @@ const styles = StyleSheet.create({ right: 16, }, customColor: { - backgroundColor: yellowA200, + backgroundColor: MD3Colors.secondary80, }, }); diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx index b77da80b09..229c2f4a0b 100644 --- a/example/src/Examples/AvatarExample.tsx +++ b/example/src/Examples/AvatarExample.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Avatar, List, MD3Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const AvatarExample = () => { - const { isV3 } = useExampleTheme(); return ( @@ -16,11 +14,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: MD3Colors.error70, }, ]} label="XD" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={MD3Colors.primary0} /> @@ -32,11 +30,11 @@ const AvatarExample = () => { style={[ styles.avatar, { - backgroundColor: isV3 ? MD3Colors.error70 : MD2Colors.yellow500, + backgroundColor: MD3Colors.error70, }, ]} icon="folder" - color={isV3 ? MD3Colors.primary0 : MD2Colors.black} + color={MD3Colors.primary0} /> diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx index 17f0e1b160..3269dc70a8 100644 --- a/example/src/Examples/BadgeExample.tsx +++ b/example/src/Examples/BadgeExample.tsx @@ -5,18 +5,15 @@ import { Badge, IconButton, List, - MD2Colors, MD3Colors, Text, Switch, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const BadgeExample = () => { const [visible, setVisible] = React.useState(true); - const { isV3 } = useExampleTheme(); return ( @@ -44,9 +41,7 @@ const BadgeExample = () => { style={[ styles.badge, { - backgroundColor: isV3 - ? MD3Colors.primary80 - : MD2Colors.blue500, + backgroundColor: MD3Colors.primary80, }, ]} > @@ -59,11 +54,11 @@ const BadgeExample = () => { - + - + diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx index 0e856e9699..7ec874a283 100644 --- a/example/src/Examples/BannerExample.tsx +++ b/example/src/Examples/BannerExample.tsx @@ -8,7 +8,7 @@ import { View, } from 'react-native'; -import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper'; +import { Banner, FAB, MD3Colors } from 'react-native-paper'; import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; @@ -29,25 +29,18 @@ const BannerExample = () => { setHeight(layoutHeight); }; - const customTheme = !defaultTheme.isV3 - ? { - ...defaultTheme, - colors: { - text: MD2Colors.white, - surface: MD2Colors.blue200, - primary: MD2Colors.purple900, - }, - } - : { - ...defaultTheme, - colors: { - onSurface: MD3Colors.tertiary100, - elevation: { - level1: MD3Colors.tertiary50, - }, - primary: MD3Colors.tertiary10, - }, - }; + const customTheme = { + ...defaultTheme, + colors: { + ...defaultTheme.colors, + onSurface: MD3Colors.tertiary100, + elevation: { + ...defaultTheme.colors.elevation, + level1: MD3Colors.tertiary50, + }, + primary: MD3Colors.tertiary10, + }, + }; return ( <> diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx index 6ed5d7add5..419aca0f9d 100644 --- a/example/src/Examples/BottomNavigationExample.tsx +++ b/example/src/Examples/BottomNavigationExample.tsx @@ -17,7 +17,6 @@ import { } from 'react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type Route = { route: { key: string } }; @@ -49,7 +48,6 @@ const PhotoGallery = ({ route }: Route) => { }; const BottomNavigationExample = ({ navigation }: Props) => { - const { isV3 } = useExampleTheme(); const insets = useSafeAreaInsets(); const [index, setIndex] = React.useState(0); const [menuVisible, setMenuVisible] = React.useState(false); @@ -63,34 +61,25 @@ const BottomNavigationExample = ({ navigation }: Props) => { key: 'album', title: 'Album', focusedIcon: 'image-album', - ...(!isV3 && { color: '#6200ee' }), }, { key: 'library', title: 'Library', focusedIcon: 'inbox', + unfocusedIcon: 'inbox-outline', badge: true, - ...(isV3 - ? { unfocusedIcon: 'inbox-outline' } - : { - color: '#2962ff', - }), }, { key: 'favorites', title: 'Favorites', focusedIcon: 'heart', - ...(isV3 - ? { unfocusedIcon: 'heart-outline' } - : { - color: '#00796b', - }), + unfocusedIcon: 'heart-outline', }, { key: 'purchased', title: 'Purchased', focusedIcon: 'shopping', - ...(isV3 ? { unfocusedIcon: 'shopping-outline' } : { color: '#c51162' }), + unfocusedIcon: 'shopping-outline', }, ]); @@ -112,7 +101,6 @@ const BottomNavigationExample = ({ navigation }: Props) => { setMenuVisible(true)} - {...(!isV3 && { color: 'white' })} /> } > diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx index 7ec58f90f4..c6ecc56d09 100644 --- a/example/src/Examples/ButtonExample.tsx +++ b/example/src/Examples/ButtonExample.tsx @@ -9,11 +9,11 @@ import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { const theme = useExampleTheme(); - const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent; + const color = theme.colors.inversePrimary; return ( - + - {theme.isV3 && ( - - - - - - - - - - - )} - + + + + + + + + + + + - + - {theme.isV3 && ( - - - - - - - - - - - )} + + + + + + + + + + diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx index c8ce8c23a7..06088a646a 100644 --- a/example/src/Examples/CheckboxExample.tsx +++ b/example/src/Examples/CheckboxExample.tsx @@ -1,16 +1,8 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { - Checkbox, - MD2Colors, - MD3Colors, - Paragraph, - Text, - TouchableRipple, -} from 'react-native-paper'; +import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const CheckboxExample = () => { @@ -18,14 +10,11 @@ const CheckboxExample = () => { const [checkedCustom, setCheckedCustom] = React.useState(true); const [indeterminate, setIndeterminate] = React.useState(true); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; - return ( setCheckedNormal(!checkedNormal)}> - Normal + Normal @@ -34,10 +23,10 @@ const CheckboxExample = () => { setCheckedCustom(!checkedCustom)}> - Custom + Custom @@ -46,7 +35,7 @@ const CheckboxExample = () => { setIndeterminate(!indeterminate)}> - Indeterminate + Indeterminate @@ -54,15 +43,15 @@ const CheckboxExample = () => { - Checked (Disabled) + Checked (Disabled) - Unchecked (Disabled) + Unchecked (Disabled) - Indeterminate (Disabled) + Indeterminate (Disabled) diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 20f0393153..211ebfde49 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -2,16 +2,8 @@ import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import color from 'color'; -import { - Chip, - List, - MD2Colors, - MD3Colors, - Snackbar, - Text, -} from 'react-native-paper'; +import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ChipExample = () => { @@ -19,8 +11,7 @@ const ChipExample = () => { visible: false, text: '', }); - const { isV3 } = useExampleTheme(); - const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900; + const customColor = MD3Colors.error50; return ( <> @@ -30,24 +21,20 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} style={styles.chip}> - Elevated - - {}}> - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} style={styles.chip}> + Elevated + + {}}> + Compact chip + {}} onClose={() => @@ -137,35 +124,31 @@ const ChipExample = () => { {}} style={styles.chip}> Simple - {isV3 && ( - <> - {}} - style={styles.chip} - > - With selected overlay - - {}} - style={styles.chip} - > - Elevated - - {}} - style={styles.chip} - > - Compact chip - - - )} + {}} + style={styles.chip} + > + With selected overlay + + {}} + style={styles.chip} + > + Elevated + + {}} + style={styles.chip} + > + Compact chip + {}} @@ -251,38 +234,34 @@ const ChipExample = () => { - {isV3 && ( - <> - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - {}} - compact - avatar={ - - } - style={[styles.chip, styles.customBorderRadius]} - > - Compact with custom border radius - - - )} + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + + {}} + compact + avatar={ + + } + style={[styles.chip, styles.customBorderRadius]} + > + Compact with custom border radius + {}} diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx index 251b7b6fdb..e3bffafd60 100644 --- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx +++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx @@ -1,15 +1,8 @@ import * as React from 'react'; -import { - Button, - Portal, - Dialog, - MD2Colors, - MD3Colors, -} from 'react-native-paper'; +import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; const DialogWithCustomColors = ({ visible, @@ -18,34 +11,25 @@ const DialogWithCustomColors = ({ visible: boolean; close: () => void; }) => { - const { isV3 } = useExampleTheme(); - return ( - + Alert - + This is a dialog with custom colors - diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx index 32512dc91d..261b7ff9e6 100644 --- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx +++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -26,7 +26,7 @@ const DialogWithDismissableBackButton = ({ - diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index 5ef9e7e7f2..5860737e3e 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'; -import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper'; +import { Dialog, MD3Colors, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; -import { useExampleTheme } from '../../hooks/useExampleTheme'; const isIOS = Platform.OS === 'ios'; @@ -15,7 +14,6 @@ const DialogWithLoadingIndicator = ({ visible: boolean; close: () => void; }) => { - const { isV3 } = useExampleTheme(); return ( @@ -23,7 +21,7 @@ const DialogWithLoadingIndicator = ({ diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx index 2af40f4e97..ded4896fe2 100644 --- a/example/src/Examples/Dialogs/UndismissableDialog.tsx +++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper'; +import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; @@ -18,7 +18,7 @@ const UndismissableDialog = ({ This is an undismissable dialog!! - diff --git a/example/src/Examples/IconButtonExample.tsx b/example/src/Examples/IconButtonExample.tsx index 6342b1e144..a2ac7e72db 100644 --- a/example/src/Examples/IconButtonExample.tsx +++ b/example/src/Examples/IconButtonExample.tsx @@ -1,36 +1,11 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; -import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper'; +import { IconButton, List, MD3Colors } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; const ButtonExample = () => { - const { isV3 } = useExampleTheme(); - if (!isV3) { - return ( - - {}} /> - {}} - /> - {}} loading /> - {}} /> - {}} - style={{ backgroundColor: MD2Colors.lightGreen200 }} - /> - {}} /> - - ); - } - return ( @@ -200,10 +175,6 @@ const ButtonExample = () => { ButtonExample.title = 'Icon Button'; const styles = StyleSheet.create({ - v2Container: { - flexDirection: 'row', - padding: 8, - }, v3Container: { flexDirection: 'column', }, diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx index c1164d35b6..b43fb04778 100644 --- a/example/src/Examples/MenuExample.tsx +++ b/example/src/Examples/MenuExample.tsx @@ -16,7 +16,6 @@ import { TouchableRipple, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type ContextualMenuCoord = { x: number; y: number }; @@ -35,8 +34,6 @@ const MenuExample = ({ navigation }: Props) => { const [visible, setVisible] = React.useState({}); const [contextualMenuCoord, setContextualMenuCoor] = React.useState({ x: 0, y: 0 }); - const { isV3 } = useExampleTheme(); - const _toggleMenu = (name: string) => () => setVisible({ ...visible, [name]: !visible[name] }); @@ -66,16 +63,12 @@ const MenuExample = ({ navigation }: Props) => { visible={_getVisible('menu1')} onDismiss={_toggleMenu('menu1')} anchor={ - + } > {}} title="Undo" /> {}} title="Redo" /> - + {}} title="Cut" disabled /> {}} title="Copy" disabled /> {}} title="Paste" /> @@ -99,7 +92,7 @@ const MenuExample = ({ navigation }: Props) => { {}} title="Undo" /> {}} title="Redo" /> - + { onPress={() => {}} title="Paste" /> - {isV3 && ( - {}} - title="Share" - /> - )} + {}} + title="Share" + /> { > {}} title="Item 1" /> {}} title="Item 2" /> - + {}} title="Item 3" disabled /> diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx index 565147f4c6..5ab797bb1d 100644 --- a/example/src/Examples/ProgressBarExample.tsx +++ b/example/src/Examples/ProgressBarExample.tsx @@ -4,7 +4,6 @@ import { View, StyleSheet, Animated } from 'react-native'; import { Button, ProgressBar, - MD2Colors, MD3Colors, ProgressBarProps, Text, @@ -29,7 +28,6 @@ const ProgressBarExample = () => { const [visible, setVisible] = React.useState(true); const [progress, setProgress] = React.useState(0.3); const theme = useExampleTheme(); - const { isV3 } = theme; const { current: progressBarValue } = React.useRef(new Animated.Value(0)); const runCustomAnimation = () => { @@ -64,7 +62,7 @@ const ProgressBarExample = () => { @@ -75,9 +73,9 @@ const ProgressBarExample = () => { diff --git a/example/src/Examples/RadioButtonExample.tsx b/example/src/Examples/RadioButtonExample.tsx index 88bf9ebfb7..7e3b3cf754 100644 --- a/example/src/Examples/RadioButtonExample.tsx +++ b/example/src/Examples/RadioButtonExample.tsx @@ -2,29 +2,24 @@ import * as React from 'react'; import { StyleSheet, View } from 'react-native'; import { - MD2Colors, MD3Colors, - Paragraph, RadioButton, Text, TouchableRipple, } from 'react-native-paper'; -import { useExampleTheme } from '../hooks/useExampleTheme'; import ScreenWrapper from '../ScreenWrapper'; type State = 'normal' | 'normal-ios' | 'normal-item' | 'custom'; const RadioButtonExample = () => { const [checked, setChecked] = React.useState('normal'); - const { isV3 } = useExampleTheme(); - const TextComponent = isV3 ? Text : Paragraph; return ( setChecked('normal')}> - Normal - Material Design + Normal - Material Design { setChecked('normal-ios')}> - Normal 2 - IOS + Normal 2 - IOS { setChecked('custom')}> - Custom + Custom @@ -63,11 +58,11 @@ const RadioButtonExample = () => { onPress={() => setChecked('normal-item')} /> - Checked (Disabled) + Checked (Disabled) - Unchecked (Disabled) + Unchecked (Disabled) { const [valueNormal, setNormalValue] = React.useState(true); const [valueCustom, setCustomValue] = React.useState(true); - const { isV3 } = useExampleTheme(); - const switchValueNormalLabel = `switch ${ valueNormal === true ? 'on' : 'off' }`; @@ -26,13 +16,11 @@ const SwitchExample = () => { valueCustom === true ? 'on' : 'off' }`; - const TextComponent = isV3 ? Text : Paragraph; - return Platform.OS === 'android' ? ( setNormalValue(!valueNormal)}> - Normal {switchValueNormalLabel} + Normal {switchValueNormalLabel} @@ -40,47 +28,44 @@ const SwitchExample = () => { setCustomValue(!valueCustom)}> - Custom {switchValueCustomlLabel} + Custom {switchValueCustomlLabel} - + - Switch on (disabled) + Switch on (disabled) - Switch off (disabled) + Switch off (disabled) ) : ( - Normal {switchValueNormalLabel} + Normal {switchValueNormalLabel} setNormalValue(!valueNormal)} /> - Custom {switchValueCustomlLabel} + Custom {switchValueCustomlLabel} setCustomValue(!valueCustom)} - color={isV3 ? MD3Colors.tertiary50 : MD2Colors.blue500} + color={MD3Colors.tertiary50} /> - Switch on (disabled) + Switch on (disabled) - Switch off (disabled) + Switch off (disabled) diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx index 7102abd0b6..37c039ba13 100644 --- a/example/src/Examples/TextInputExample.tsx +++ b/example/src/Examples/TextInputExample.tsx @@ -13,7 +13,6 @@ import { configureFonts, HelperText, List, - MD2Colors, MD3Colors, TextInput, } from 'react-native-paper'; @@ -138,11 +137,7 @@ const TextInputExample = () => { const newColors = { ...state.iconsColor, - [name]: !color - ? theme.isV3 - ? theme.colors.primary - : theme.colors?.accent - : undefined, + [name]: !color ? theme.colors.primary : undefined, }; dispatch({ @@ -572,9 +567,7 @@ const TextInputExample = () => { * @@ -604,12 +597,8 @@ const TextInputExample = () => { onChangeText={(flatUnderlineColors) => inputActionHandler('flatUnderlineColors', flatUnderlineColors) } - underlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeUnderlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + underlineColor={MD3Colors.primary70} + activeUnderlineColor={MD3Colors.tertiary50} /> { onChangeText={(outlinedColors) => inputActionHandler('outlinedColors', outlinedColors) } - outlineColor={ - theme.isV3 ? MD3Colors.primary70 : MD2Colors.pink400 - } - activeOutlineColor={ - theme.isV3 ? MD3Colors.tertiary50 : MD2Colors.amber900 - } + outlineColor={MD3Colors.primary70} + activeOutlineColor={MD3Colors.tertiary50} /> void; toggleRtl: () => void; - toggleThemeVersion: () => void; toggleCollapsed: () => void; toggleCustomFont: () => void; toggleRippleEffect: () => void; toggleShouldUseDeviceColors?: () => void; - theme: MD2Theme | MD3Theme; + theme: MD3Theme; rtl: boolean; collapsed: boolean; customFontLoaded: boolean; diff --git a/example/src/hooks/useExampleTheme.ts b/example/src/hooks/useExampleTheme.ts index 9196f044b0..059ab4d05c 100644 --- a/example/src/hooks/useExampleTheme.ts +++ b/example/src/hooks/useExampleTheme.ts @@ -1,3 +1,3 @@ -import { MD2Theme, MD3Theme, useTheme } from 'react-native-paper'; +import { useTheme, type MD3Theme } from 'react-native-paper'; -export const useExampleTheme = () => useTheme(); +export const useExampleTheme = () => useTheme(); diff --git a/example/src/index.native.tsx b/example/src/index.native.tsx index 0878a1f13b..70d712816b 100644 --- a/example/src/index.native.tsx +++ b/example/src/index.native.tsx @@ -9,13 +9,7 @@ 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, - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, -} from 'react-native-paper'; +import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -49,7 +43,6 @@ export default function PaperExample() { const [shouldUseDeviceColors, setShouldUseDeviceColors] = React.useState(true); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [rtl, setRtl] = React.useState( I18nManager.getConstants().isRTL ); @@ -59,10 +52,6 @@ export default function PaperExample() { const { theme: mdTheme } = useMaterial3Theme(); const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - if (!deviceColorsSupported || !shouldUseDeviceColors) { return isDarkMode ? MD3DarkTheme : MD3LightTheme; } @@ -70,7 +59,7 @@ export default function PaperExample() { return isDarkMode ? { ...MD3DarkTheme, colors: mdTheme.dark } : { ...MD3LightTheme, colors: mdTheme.light }; - }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]); + }, [isDarkMode, mdTheme, shouldUseDeviceColors]); React.useEffect(() => { const restoreState = async () => { @@ -144,12 +133,6 @@ export default function PaperExample() { toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, customFontLoaded, rippleEffectEnabled, collapsed, diff --git a/example/src/index.tsx b/example/src/index.tsx index 76607763f1..4395d2d55e 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -5,13 +5,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer'; import { InitialState, NavigationContainer } from '@react-navigation/native'; import { useFonts } from 'expo-font'; import { useKeepAwake } from 'expo-keep-awake'; -import { - PaperProvider, - MD3DarkTheme, - MD3LightTheme, - MD2DarkTheme, - MD2LightTheme, -} from 'react-native-paper'; +import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper'; import { SafeAreaInsetsContext } from 'react-native-safe-area-context'; import DrawerItems from './DrawerItems'; @@ -43,18 +37,14 @@ export default function PaperExample() { >(); const [isDarkMode, setIsDarkMode] = React.useState(false); - const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3); const [collapsed, setCollapsed] = React.useState(false); const [customFontLoaded, setCustomFont] = React.useState(false); const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true); - const theme = React.useMemo(() => { - if (themeVersion === 2) { - return isDarkMode ? MD2DarkTheme : MD2LightTheme; - } - - return isDarkMode ? MD3DarkTheme : MD3LightTheme; - }, [isDarkMode, themeVersion]); + const theme = React.useMemo( + () => (isDarkMode ? MD3DarkTheme : MD3LightTheme), + [isDarkMode] + ); React.useEffect(() => { const restoreState = async () => { @@ -112,12 +102,6 @@ export default function PaperExample() { const preferences = React.useMemo( () => ({ toggleTheme: () => setIsDarkMode((oldValue) => !oldValue), - toggleThemeVersion: () => { - setCustomFont(false); - setCollapsed(false); - setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)); - setRippleEffectEnabled(true); - }, toggleCollapsed: () => setCollapsed(!collapsed), toggleCustomFont: () => setCustomFont(!customFontLoaded), toggleRippleEffect: () => setRippleEffectEnabled(!rippleEffectEnabled), diff --git a/src/babel/__fixtures__/rewrite-imports/code.js b/src/babel/__fixtures__/rewrite-imports/code.js index cc5e6d0b5c..6509ef2f67 100644 --- a/src/babel/__fixtures__/rewrite-imports/code.js +++ b/src/babel/__fixtures__/rewrite-imports/code.js @@ -5,7 +5,6 @@ import { Button, FAB, Appbar, - MD2Colors, MD3Colors, NonExistent, NonExistentSecond as Stuff, diff --git a/src/babel/__fixtures__/rewrite-imports/output.js b/src/babel/__fixtures__/rewrite-imports/output.js index ecaff8d814..7204b0ca33 100644 --- a/src/babel/__fixtures__/rewrite-imports/output.js +++ b/src/babel/__fixtures__/rewrite-imports/output.js @@ -4,7 +4,6 @@ import BottomNavigation from "react-native-paper/lib/module/components/BottomNav import Button from "react-native-paper/lib/module/components/Button/Button"; import FAB from "react-native-paper/lib/module/components/FAB"; import Appbar from "react-native-paper/lib/module/components/Appbar"; -import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors"; import { MD3Colors } from "react-native-paper/lib/module/styles/themes/v3/tokens"; import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js"; import { ThemeProvider } from "react-native-paper/lib/module/core/theming"; diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx index 5a3b9f8736..3de4e73d2f 100644 --- a/src/components/ActivityIndicator.tsx +++ b/src/components/ActivityIndicator.tsx @@ -45,10 +45,10 @@ const DURATION = 2400; * ## Usage * ```js * import * as React from 'react'; - * import { ActivityIndicator, MD2Colors } from 'react-native-paper'; + * import { ActivityIndicator, MD3Colors } from 'react-native-paper'; * * const MyComponent = () => ( - * + * * ); * * export default MyComponent; diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx index d59c626769..4934ef7bf6 100644 --- a/src/components/Appbar/Appbar.tsx +++ b/src/components/Appbar/Appbar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Animated, - Platform, StyleProp, StyleSheet, View, @@ -9,12 +8,9 @@ import { ColorValue, } from 'react-native'; -import color from 'color'; - import AppbarContent from './AppbarContent'; import { AppbarModes, - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, renderAppbarContent, @@ -165,11 +161,10 @@ const Appbar = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { backgroundColor: customBackground, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + elevation = elevated ? 2 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { elevation?: number; @@ -184,28 +179,17 @@ const Appbar = ({ ); const isMode = (modeToCompare: AppbarModes) => { - return isV3 && mode === modeToCompare; + return mode === modeToCompare; }; - let isDark = false; - - if (typeof dark === 'boolean') { - isDark = dark; - } else if (!isV3) { - isDark = - backgroundColor === 'transparent' - ? false - : typeof backgroundColor === 'string' - ? !color(backgroundColor).isLight() - : true; - } + const isDark = typeof dark === 'boolean' ? dark : false; - const isV3CenterAlignedMode = isV3 && isMode('center-aligned'); + const isCenterAlignedMode = isMode('center-aligned'); let shouldCenterContent = false; let shouldAddLeftSpacing = false; let shouldAddRightSpacing = false; - if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) { + if (isCenterAlignedMode) { let hasAppbarContent = false; let leftItemsCount = 0; let rightItemsCount = 0; @@ -225,14 +209,12 @@ const Appbar = ({ }); shouldCenterContent = - hasAppbarContent && - leftItemsCount < 2 && - rightItemsCount < (isV3 ? 3 : 2); + hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3; shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0; shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0; } - const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing; + const spacingStyle = styles.v3Spacing; const insets = { paddingBottom: safeAreaInsets?.bottom, @@ -247,27 +229,25 @@ const Appbar = ({ { backgroundColor }, styles.appbar, { - height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, + height: modeAppbarHeight[mode], }, insets, restStyle, - !theme.isV3 && { elevation }, ]} elevation={elevation as MD3Elevation} container {...rest} > {shouldAddLeftSpacing ? : null} - {(!isV3 || isMode('small') || isMode('center-aligned')) && ( + {(isMode('small') || isMode('center-aligned')) && ( <> {/* Render only the back action at first place */} {renderAppbarContent({ children, isDark, theme, - isV3, renderOnly: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} {/* Render the rest of the content except the back action */} {renderAppbarContent({ @@ -278,9 +258,8 @@ const Appbar = ({ ], isDark, theme, - isV3, renderExcept: ['Appbar.BackAction'], - shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent, + shouldCenterContent: isCenterAlignedMode || shouldCenterContent, })} )} @@ -297,14 +276,12 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.BackAction'], mode, })} {renderAppbarContent({ children: filterAppbarActions(children, true), isDark, - isV3, renderOnly: ['Appbar.Action'], mode, })} @@ -313,7 +290,6 @@ const Appbar = ({ {renderAppbarContent({ children: filterAppbarActions(children), isDark, - isV3, renderExcept: [ 'Appbar', 'Appbar.BackAction', @@ -327,7 +303,6 @@ const Appbar = ({ {renderAppbarContent({ children, isDark, - isV3, renderOnly: ['Appbar.Content'], mode, })} @@ -344,9 +319,6 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 4, }, - spacing: { - width: 48, - }, v3Spacing: { width: 52, }, diff --git a/src/components/Appbar/AppbarAction.tsx b/src/components/Appbar/AppbarAction.tsx index ab5a72a110..14982cbecb 100644 --- a/src/components/Appbar/AppbarAction.tsx +++ b/src/components/Appbar/AppbarAction.tsx @@ -7,11 +7,10 @@ import type { ViewStyle, } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; +import type { MD3Theme } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; import IconButton from '../IconButton/IconButton'; @@ -98,14 +97,13 @@ const AppbarAction = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); + const { colors } = theme as MD3Theme; const actionIconColor = iconColor ? iconColor - : theme.isV3 - ? isLeading - ? theme.colors.onSurface - : theme.colors.onSurfaceVariant - : color(black).alpha(0.54).rgb().string(); + : isLeading + ? colors.onSurface + : colors.onSurfaceVariant; return ( & { */ const AppbarContent = ({ color: titleColor, - subtitle, - subtitleStyle, onPress, disabled, style, @@ -117,15 +117,9 @@ const AppbarContent = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors } = theme; - - const titleTextColor = titleColor - ? titleColor - : isV3 - ? colors.onSurface - : white; + const { colors, fonts } = theme as MD3Theme; - const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string(); + const titleTextColor = titleColor ? titleColor : colors.onSurface; const modeContainerStyles = { small: styles.v3DefaultContainer, @@ -138,7 +132,7 @@ const AppbarContent = ({ const contentWrapperProps = { pointerEvents: 'box-none' as ViewProps['pointerEvents'], - style: [styles.container, isV3 && modeContainerStyles[mode], style], + style: [styles.container, modeContainerStyles[mode], style], testID, ...rest, }; @@ -147,18 +141,13 @@ const AppbarContent = ({ <> {typeof title === 'string' ? ( - {subtitle} - - ) : null} ); @@ -233,12 +214,6 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', paddingBottom: 28, }, - title: { - fontSize: Platform.OS === 'ios' ? 17 : 20, - }, - subtitle: { - fontSize: Platform.OS === 'ios' ? 11 : 14, - }, }); const touchableRole: AccessibilityRole = 'button'; diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index e0eb6386d7..9efe81bba1 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -13,7 +13,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { Appbar } from './Appbar'; import { - DEFAULT_APPBAR_HEIGHT, getAppbarBackgroundColor, modeAppbarHeight, getAppbarBorders, @@ -104,14 +103,13 @@ const AppbarHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const flattenedStyle = StyleSheet.flatten(style); const { - height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT, - elevation = isV3 ? (elevated ? 2 : 0) : 4, + height = modeAppbarHeight[mode], + elevation = elevated ? 2 : 0, backgroundColor: customBackground, - zIndex = isV3 && elevated ? 1 : 0, + zIndex = elevated ? 1 : 0, ...restStyle } = (flattenedStyle || {}) as Exclude & { height?: number; @@ -150,10 +148,8 @@ const AppbarHeader = ({ testID={testID} style={[{ height, backgroundColor }, styles.appbar, restStyle]} dark={dark} - {...(isV3 && { - mode, - })} {...rest} + mode={mode} theme={theme} /> diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts index a6c68af2a5..fbf4fe438e 100644 --- a/src/components/Appbar/utils.ts +++ b/src/components/Appbar/utils.ts @@ -2,9 +2,8 @@ import React from 'react'; import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; import { StyleSheet, Animated } from 'react-native'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; -import type { InternalTheme, ThemeProp } from '../../types'; +import { white } from '../../styles/themes/v2/colors'; +import type { InternalTheme, MD3Theme, ThemeProp } from '../../types'; export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned'; @@ -24,26 +23,17 @@ const borderStyleProperties = [ export const getAppbarBackgroundColor = ( theme: InternalTheme, - elevation: number, + _elevation: number, customBackground?: ColorValue, elevated?: boolean ) => { - const { isV3, dark: isDarkTheme, mode, colors } = theme; - const isAdaptiveMode = mode === 'adaptive'; + const { colors } = theme as MD3Theme; if (customBackground) { return customBackground; } - if (!isV3) { - if (isDarkTheme && isAdaptiveMode) { - return overlay(elevation, colors?.surface); - } - - return colors.primary; - } - if (elevated) { - return theme.colors.elevation.level2; + return colors.elevation.level2; } return colors.surface; @@ -52,7 +42,6 @@ export const getAppbarBackgroundColor = ( export const getAppbarColor = ({ color, isDark, - isV3, }: BaseProps & { color: string }) => { if (typeof color !== 'undefined') { return color; @@ -62,11 +51,7 @@ export const getAppbarColor = ({ return white; } - if (isV3) { - return undefined; - } - - return black; + return undefined; }; export const getAppbarBorders = ( @@ -89,13 +74,11 @@ export const getAppbarBorders = ( type BaseProps = { isDark: boolean; - isV3: boolean; }; type RenderAppbarContentProps = BaseProps & { children: React.ReactNode; shouldCenterContent?: boolean; - isV3: boolean; renderOnly?: (string | boolean)[]; renderExcept?: string[]; mode?: AppbarModes; @@ -133,7 +116,6 @@ export const renderAppbarContent = ({ children, isDark, shouldCenterContent = false, - isV3, renderOnly, renderExcept, mode = 'small', @@ -172,16 +154,14 @@ export const renderAppbarContent = ({ theme?: ThemeProp; } = { theme, - color: getAppbarColor({ color: child.props.color, isDark, isV3 }), + color: getAppbarColor({ color: child.props.color, isDark }), }; // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter if (child.type.displayName === 'Appbar.Content') { props.mode = mode; props.style = [ - isV3 - ? i === 0 && !shouldCenterContent && styles.v3Spacing - : i !== 0 && styles.v2Spacing, + i === 0 && !shouldCenterContent && styles.v3Spacing, shouldCenterContent && styles.centerAlignedContent, child.props.style, ]; @@ -195,9 +175,6 @@ const styles = StyleSheet.create({ centerAlignedContent: { alignItems: 'center', }, - v2Spacing: { - marginLeft: 8, - }, v3Spacing: { marginLeft: 12, }, diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 54c70770f2..d8bf38015b 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -8,9 +8,7 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { ThemeProp } from '../types'; -import getContrastingColor from '../utils/getContrastingColor'; const defaultSize = 20; @@ -85,20 +83,14 @@ const Badge = ({ }).start(); }, [visible, opacity, scale]); - const { - backgroundColor = theme.isV3 - ? theme.colors.error - : theme.colors?.notification, - ...restStyle - } = (StyleSheet.flatten(style) || {}) as TextStyle; + const { backgroundColor = theme.colors.error, ...restStyle } = + (StyleSheet.flatten(style) || {}) as TextStyle; - const textColor = theme.isV3 - ? theme.colors.onError - : getContrastingColor(backgroundColor, white, black); + const textColor = theme.colors.onError; const borderRadius = size / 2; - const paddingHorizontal = theme.isV3 ? 3 : 4; + const paddingHorizontal = 3; return ( { const theme = useInternalTheme(themeOverrides); + const { colors } = theme as MD3Theme; const { current: position } = React.useRef( new Animated.Value(visible ? 1 : 0) ); @@ -192,10 +193,10 @@ const Banner = ({ return ( @@ -222,12 +223,11 @@ const Banner = ({ ) : null} @@ -292,9 +292,6 @@ const styles = StyleSheet.create({ button: { margin: 4, }, - elevation: { - elevation: 1, - }, transparent: { opacity: 0, }, diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index c4e9b71a60..54df09d236 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -353,9 +353,8 @@ const BottomNavigation = ({ }: Props) => { const theme = useInternalTheme(themeOverrides); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -404,7 +403,7 @@ const BottomNavigation = ({ ...navigationState.routes.map((_, i) => Animated.timing(tabsPositionAnims[i], { toValue: i === index ? 0 : i >= index ? 1 : -1, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: sceneAnimationEasing, }) diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index 05264c610a..3d315aea70 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -11,7 +11,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { @@ -20,9 +19,7 @@ import { getLabelColor, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import overlay from '../../styles/overlay'; -import { black, white } from '../../styles/themes/v2/colors'; -import type { ThemeProp } from '../../types'; +import type { MD3Theme, ThemeProp } from '../../types'; import useAnimatedValue from '../../utils/useAnimatedValue'; import useAnimatedValueArray from '../../utils/useAnimatedValueArray'; import useIsKeyboardShown from '../../utils/useIsKeyboardShown'; @@ -212,7 +209,6 @@ export type Props = { testID?: string; }; -const MIN_RIPPLE_SCALE = 0.001; // Minimum scale is not 0 due to bug with animation const MIN_TAB_WIDTH = 96; const MAX_TAB_WIDTH = 168; const BAR_HEIGHT = 56; @@ -321,7 +317,7 @@ const BottomNavigationBar = ({ ), getLabelText = ({ route }: { route: Route }) => route.title, getBadge = ({ route }: { route: Route }) => route.badge, - getColor = ({ route }: { route: Route }) => route.color, + getColor: _getColor = ({ route }: { route: Route }) => route.color, getAccessibilityLabel = ({ route }: { route: Route }) => route.accessibilityLabel, getTestID = ({ route }: { route: Route }) => route.testID, @@ -342,11 +338,11 @@ const BottomNavigationBar = ({ theme: themeOverrides, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { colors } = theme as MD3Theme; const { bottom, left, right } = useSafeAreaInsets(); const { scale } = theme.animation; - const compact = compactProp ?? !theme.isV3; - let shifting = - shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); + const compact = compactProp ?? false; + let shifting = shiftingProp ?? false; if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -371,18 +367,7 @@ const BottomNavigationBar = ({ ); /** - * Index of the currently active tab. Used for setting the background color. - * We don't use the color as an animated value directly, because `setValue` seems to be buggy with colors?. - */ - const indexAnim = useAnimatedValue(navigationState.index); - - /** - * Animation for the background color ripple, used to determine it's scale and opacity. - */ - const rippleAnim = useAnimatedValue(MIN_RIPPLE_SCALE); - - /** - * Layout of the navigation bar. The width is used to determine the size and position of the ripple. + * Layout of the navigation bar. */ const [layout, onLayout] = useLayout(); @@ -412,42 +397,21 @@ const BottomNavigationBar = ({ const animateToIndex = React.useCallback( (index: number) => { - // Reset the ripple to avoid glitch if it's currently animating - rippleAnim.setValue(MIN_RIPPLE_SCALE); - - Animated.parallel([ - Animated.timing(rippleAnim, { - toValue: 1, - duration: theme.isV3 || shifting ? 400 * scale : 0, - useNativeDriver: true, - }), - ...navigationState.routes.map((_, i) => + Animated.parallel( + navigationState.routes.map((_, i) => Animated.timing(tabsAnims[i], { toValue: i === index ? 1 : 0, - duration: theme.isV3 || shifting ? 150 * scale : 0, + duration: 150 * scale, useNativeDriver: true, easing: animationEasing, }) - ), - ]).start(() => { + ) + ).start(() => { // Workaround a bug in native animations where this is reset after first animation tabsAnims.map((tab, i) => tab.setValue(i === index ? 1 : 0)); - - // Update the index to change bar's background color and then hide the ripple - indexAnim.setValue(index); - rippleAnim.setValue(MIN_RIPPLE_SCALE); }); }, - [ - rippleAnim, - theme.isV3, - shifting, - scale, - navigationState.routes, - tabsAnims, - animationEasing, - indexAnim, - ] + [scale, navigationState.routes, tabsAnims, animationEasing] ); React.useEffect(() => { @@ -479,62 +443,28 @@ const BottomNavigationBar = ({ }; const { routes } = navigationState; - const { colors, dark: isDarkTheme, mode, isV3 } = theme; - const { backgroundColor: customBackground, elevation = 4 } = - (StyleSheet.flatten(style) || {}) as { - elevation?: number; - backgroundColor?: ColorValue; - }; + const { backgroundColor: customBackground } = (StyleSheet.flatten(style) || + {}) as { + elevation?: number; + backgroundColor?: ColorValue; + }; - const approxBackgroundColor = customBackground - ? customBackground - : isDarkTheme && mode === 'adaptive' - ? overlay(elevation, colors?.surface) - : colors?.primary; - - const v2BackgroundColorInterpolation = shifting - ? indexAnim.interpolate({ - inputRange: routes.map((_, i) => i), - // FIXME: does outputRange support ColorValue or just strings? - // @ts-expect-error - outputRange: routes.map( - (route) => getColor({ route }) || approxBackgroundColor - ), - }) - : approxBackgroundColor; - - const backgroundColor = isV3 - ? customBackground || theme.colors.elevation.level2 - : shifting - ? v2BackgroundColorInterpolation - : approxBackgroundColor; - - const isDark = - typeof approxBackgroundColor === 'string' - ? !color(approxBackgroundColor).isLight() - : true; - - const textColor = isDark ? white : black; + const backgroundColor = customBackground || colors.elevation.level2; const activeTintColor = getActiveTintColor({ activeColor, - defaultColor: textColor, theme, }); const inactiveTintColor = getInactiveTintColor({ inactiveColor, - defaultColor: textColor, theme, }); - const touchColor = color(activeTintColor).alpha(0.12).rgb().string(); const maxTabWidth = routes.length > 3 ? MIN_TAB_WIDTH : MAX_TAB_WIDTH; const maxTabBarWidth = maxTabWidth * routes.length; - const rippleSize = layout.width / 4; - const insets = { left: safeAreaInsets?.left ?? left, right: safeAreaInsets?.right ?? right, @@ -543,10 +473,9 @@ const BottomNavigationBar = ({ return ( ({ accessibilityRole={'tablist'} testID={`${testID}-content-wrapper`} > - {shifting && !isV3 ? ( - - ) : null} {routes.map((route, index) => { const focused = navigationState.index === index; const active = tabsAnims[index]; - // Scale the label up - const scale = - labeled && shifting - ? active.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1; - // Move down the icon to account for no-label in shifting and smaller label in non-shifting. const translateY = labeled ? shifting @@ -684,7 +567,6 @@ const BottomNavigationBar = ({ tintColor: activeTintColor, hasColor: Boolean(activeColor), focused, - defaultColor: textColor, theme, }); @@ -692,55 +574,53 @@ const BottomNavigationBar = ({ tintColor: inactiveTintColor, hasColor: Boolean(inactiveColor), focused, - defaultColor: textColor, theme, }); const badgeStyle = { - top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2, + top: typeof badge === 'boolean' ? 4 : 2, right: - (badge != null && typeof badge !== 'boolean' + badge != null && typeof badge !== 'boolean' ? String(badge).length * -2 - : 0) - (!isV3 ? 2 : 0), + : 0, }; - const isLegacyOrV3Shifting = !isV3 || (isV3 && shifting && labeled); + const isLegacyOrV3Shifting = shifting && labeled; - const font = isV3 ? theme.fonts.labelMedium : {}; + const font = (theme as MD3Theme).fonts.labelMedium; return renderTouchable({ key: route.key, route, borderless: true, centered: true, - rippleColor: isV3 ? 'transparent' : touchColor, + rippleColor: 'transparent', onPress: () => onTabPress(eventForIndex(index)), onLongPress: () => onTabLongPress?.(eventForIndex(index)), testID: getTestID({ route }), accessibilityLabel: getAccessibilityLabel({ route }), accessibilityRole: Platform.OS === 'ios' ? 'button' : 'tab', accessibilityState: { selected: focused }, - style: [styles.item, isV3 && styles.v3Item], + style: [styles.item, styles.v3Item], children: ( - {isV3 && focused && ( + {focused && ( ({ scaleX: outlineScale, }, ], - backgroundColor: theme.colors.secondaryContainer, + backgroundColor: colors.secondaryContainer, }, activeIndicatorStyle, ]} @@ -759,7 +639,7 @@ const BottomNavigationBar = ({ ({ ({ ) : ( ({ {typeof badge === 'boolean' ? ( - + ) : ( {badge} @@ -821,12 +701,7 @@ const BottomNavigationBar = ({ {labeled ? ( - + ({ )} - ) : ( - !isV3 && - )} + ) : null} ), }); @@ -939,9 +812,6 @@ const styles = StyleSheet.create({ v3Item: { paddingVertical: 0, }, - ripple: { - position: 'absolute', - }, iconContainer: { height: 24, width: 24, @@ -1002,7 +872,4 @@ const styles = StyleSheet.create({ borderRadius: OUTLINE_WIDTH / 4, alignSelf: 'center', }, - elevation: { - elevation: 4, - }, }); diff --git a/src/components/BottomNavigation/utils.ts b/src/components/BottomNavigation/utils.ts index 93a4d95091..20208d4b7d 100644 --- a/src/components/BottomNavigation/utils.ts +++ b/src/components/BottomNavigation/utils.ts @@ -1,70 +1,51 @@ -import color from 'color'; -import type { InternalTheme } from 'src/types'; - -import type { black, white } from '../../styles/themes/v2/colors'; - -type BaseProps = { - defaultColor: typeof black | typeof white; - theme: InternalTheme; -}; +import type { InternalTheme, MD3Theme } from '../../types'; export const getActiveTintColor = ({ activeColor, - defaultColor, theme, -}: BaseProps & { +}: { activeColor: string | undefined; + theme: InternalTheme; }) => { if (typeof activeColor === 'string') { return activeColor; } - if (theme.isV3) { - return theme.colors.onSecondaryContainer; - } - - return defaultColor; + return (theme as MD3Theme).colors.onSecondaryContainer; }; export const getInactiveTintColor = ({ inactiveColor, - defaultColor, theme, -}: BaseProps & { +}: { inactiveColor: string | undefined; + theme: InternalTheme; }) => { if (typeof inactiveColor === 'string') { return inactiveColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(defaultColor).alpha(0.5).rgb().string(); + return (theme as MD3Theme).colors.onSurfaceVariant; }; export const getLabelColor = ({ tintColor, hasColor, focused, - defaultColor, theme, -}: BaseProps & { +}: { tintColor: string; hasColor: boolean; focused: boolean; + theme: InternalTheme; }) => { + const { colors } = theme as MD3Theme; if (hasColor) { return tintColor; } - if (theme.isV3) { - if (focused) { - return theme.colors.onSurface; - } - return theme.colors.onSurfaceVariant; + if (focused) { + return colors.onSurface; } - - return defaultColor; + return colors.onSurfaceVariant; }; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 2e4d2cf519..1d1d0d3002 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -21,7 +21,7 @@ import { getButtonTouchableRippleStyle, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { $Omit, ThemeProp } from '../../types'; +import type { $Omit, MD3Theme, ThemeProp } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; import hasTouchHandler from '../../utils/hasTouchHandler'; import { splitStyles } from '../../utils/splitStyles'; @@ -218,8 +218,8 @@ const Button = ( }, [mode] ); - const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp ?? !theme.isV3; + const { roundness, animation } = theme; + const uppercase = uppercaseProp ?? false; const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ @@ -229,10 +229,9 @@ const Button = ( onLongPress, }); - const isElevationEntitled = - !disabled && (isV3 ? isMode('elevated') : isMode('contained')); - const initialElevation = isV3 ? 1 : 2; - const activeElevation = isV3 ? 2 : 8; + const isElevationEntitled = !disabled && isMode('elevated'); + const initialElevation = 1; + const activeElevation = 2; const { current: elevation } = React.useRef( new Animated.Value(isElevationEntitled ? initialElevation : 0) @@ -250,7 +249,7 @@ const Button = ( const handlePressIn = (e: GestureResponderEvent) => { onPressIn?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: activeElevation, @@ -263,7 +262,7 @@ const Button = ( const handlePressOut = (e: GestureResponderEvent) => { onPressOut?.(e); - if (isV3 ? isMode('elevated') : isMode('contained')) { + if (isMode('elevated')) { const { scale } = animation; Animated.timing(elevation, { toValue: initialElevation, @@ -280,8 +279,8 @@ const Button = ( (style) => style.startsWith('border') && style.endsWith('Radius') ); - const borderRadius = (isV3 ? 5 : 1) * roundness; - const iconSize = isV3 ? 18 : 16; + const borderRadius = 5 * roundness; + const iconSize = 18; const { backgroundColor, borderColor, textColor, borderWidth } = getButtonColors({ @@ -311,7 +310,7 @@ const Button = ( const { color: customLabelColor, fontSize: customLabelSize } = StyleSheet.flatten(labelStyle) || {}; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = (theme as MD3Theme).fonts.labelLarge; const textStyle = { color: textColor, @@ -322,16 +321,14 @@ const Button = ( StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse' ? [ styles.iconReverse, - isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3IconReverse${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`], ] : [ styles.icon, - isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`], - isV3 && - isMode('text') && + styles[`md3Icon${compact ? 'Compact' : ''}`], + isMode('text') && styles[`md3IconTextMode${compact ? 'Compact' : ''}`], ]; @@ -346,10 +343,9 @@ const Button = ( compact && styles.compact, buttonStyle, style, - !isV3 && !disabled && { elevation }, ] as Animated.WithAnimatedValue> } - {...(isV3 && { elevation: elevation })} + elevation={elevation} container > { + const { colors } = theme as MD3Theme; if (customButtonColor && !disabled) { return customButtonColor; } - if (theme.isV3) { - if (disabled) { - if (isMode('outlined') || isMode('text')) { - return 'transparent'; - } - - return theme.colors.surfaceDisabled; - } - - if (isMode('elevated')) { - return theme.colors.elevation.level1; + if (disabled) { + if (isMode('outlined') || isMode('text')) { + return 'transparent'; } - if (isMode('contained')) { - return theme.colors.primary; - } + return colors.surfaceDisabled; + } - if (isMode('contained-tonal')) { - return theme.colors.secondaryContainer; - } + if (isMode('elevated')) { + return colors.elevation.level1; } if (isMode('contained')) { - if (disabled) { - return color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); - } + return colors.primary; + } - return theme.colors.primary; + if (isMode('contained-tonal')) { + return colors.secondaryContainer; } return 'transparent'; @@ -101,85 +89,56 @@ const getButtonTextColor = ({ backgroundColor: string; dark?: boolean; }) => { + const { colors } = theme as MD3Theme; if (customTextColor && !disabled) { return customTextColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof dark === 'boolean') { - if ( - isMode('contained') || - isMode('contained-tonal') || - isMode('elevated') - ) { - return isDark({ dark, backgroundColor }) ? white : black; - } - } - - if (isMode('outlined') || isMode('text') || isMode('elevated')) { - return theme.colors.primary; - } - - if (isMode('contained')) { - return theme.colors.onPrimary; - } + if (disabled) { + return colors.onSurfaceDisabled; + } - if (isMode('contained-tonal')) { - return theme.colors.onSecondaryContainer; + if (typeof dark === 'boolean') { + if ( + isMode('contained') || + isMode('contained-tonal') || + isMode('elevated') + ) { + return isDark({ dark, backgroundColor }) ? white : black; } } - if (disabled) { - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); + if (isMode('outlined') || isMode('text') || isMode('elevated')) { + return colors.primary; } if (isMode('contained')) { - return isDark({ dark, backgroundColor }) ? white : black; + return colors.onPrimary; + } + + if (isMode('contained-tonal')) { + return colors.onSecondaryContainer; } - return theme.colors.primary; + return colors.primary; }; const getButtonBorderColor = ({ isMode, disabled, theme }: BaseProps) => { - if (theme.isV3) { - if (disabled && isMode('outlined')) { - return theme.colors.surfaceDisabled; - } - - if (isMode('outlined')) { - return theme.colors.outline; - } + const { colors } = theme as MD3Theme; + if (disabled && isMode('outlined')) { + return colors.surfaceDisabled; } if (isMode('outlined')) { - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return colors.outline; } return 'transparent'; }; -const getButtonBorderWidth = ({ - isMode, - theme, -}: Omit) => { - if (theme.isV3) { - if (isMode('outlined')) { - return 1; - } - } - +const getButtonBorderWidth = ({ isMode }: Omit) => { if (isMode('outlined')) { - return StyleSheet.hairlineWidth; + return 1; } return 0; diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 848be9fa13..422101b4e8 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -181,7 +181,7 @@ const Card = ( const { current: elevationDarkAdaptive } = React.useRef( new Animated.Value(cardElevation) ); - const { animation, dark, mode, roundness, isV3 } = theme; + const { animation, dark, mode, roundness } = theme; const prevDarkRef = React.useRef(dark); React.useEffect(() => { @@ -213,20 +213,20 @@ const Card = ( ]); const runElevationAnimation = (pressType: HandlePressType) => { - if (isV3 && isMode('contained')) { + if (isMode('contained')) { return; } const isPressTypeIn = pressType === 'in'; if (dark && isAdaptiveMode) { Animated.timing(elevationDarkAdaptive, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, + toValue: isPressTypeIn ? 2 : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); } else { Animated.timing(elevation, { - toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation, + toValue: isPressTypeIn ? 2 : cardElevation, duration: animationDuration, useNativeDriver: false, }).start(); @@ -267,7 +267,7 @@ const Card = ( ); const borderRadiusCombinedStyles = { - borderRadius: (isV3 ? 3 : 1) * roundness, + borderRadius: 3 * roundness, ...borderRadiusStyles, }; @@ -290,20 +290,12 @@ const Card = ( & { * ``` */ const CardActions = ({ theme, style, children, ...rest }: Props) => { - const { isV3 } = useInternalTheme(theme); + useInternalTheme(theme); - const justifyContent = ( - isV3 ? 'flex-end' : 'flex-start' - ) as ViewStyle['justifyContent']; + const justifyContent = 'flex-end' as ViewStyle['justifyContent']; const containerStyle = [styles.container, { justifyContent }, style]; return ( @@ -50,11 +48,10 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => { return child; } - const compact = !isV3 && child.props.compact !== false; + const compact = child.props.compact; const mode = - child.props.mode ?? - (isV3 ? (index === 0 ? 'outlined' : 'contained') : undefined); - const childStyle = [isV3 && styles.button, child.props.style]; + child.props.mode ?? (index === 0 ? 'outlined' : 'contained'); + const childStyle = [styles.button, child.props.style]; return React.cloneElement(child, { ...child.props, diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx index b3d78fc259..f24809c405 100644 --- a/src/components/Card/CardTitle.tsx +++ b/src/components/Card/CardTitle.tsx @@ -10,8 +10,6 @@ import { import { useInternalTheme } from '../../core/theming'; import type { MD3TypescaleKey, ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Caption from '../Typography/v2/Caption'; -import Title from '../Typography/v2/Title'; export type Props = React.ComponentPropsWithRef & { /** @@ -151,9 +149,7 @@ const CardTitle = ({ style, theme: themeOverrides, }: Props) => { - const theme = useInternalTheme(themeOverrides); - const TitleComponent = theme.isV3 ? Text : Title; - const SubtitleComponent = theme.isV3 ? Text : Caption; + useInternalTheme(themeOverrides); const minHeight = subtitle || left || right ? 72 : 50; const marginBottom = subtitle ? 0 : 2; @@ -170,24 +166,24 @@ const CardTitle = ({ {title && ( - {title} - + )} {subtitle && ( - {subtitle} - + )} {right ? right({ size: 24 }) : null} diff --git a/src/components/Card/utils.tsx b/src/components/Card/utils.tsx index c0f10951c5..9a4ed5df7d 100644 --- a/src/components/Card/utils.tsx +++ b/src/components/Card/utils.tsx @@ -1,9 +1,6 @@ import type { StyleProp, ViewStyle } from 'react-native'; -import color from 'color'; - -import { black, white } from '../../styles/themes/v2/colors'; -import type { InternalTheme } from '../../types'; +import type { InternalTheme, MD3Theme } from '../../types'; type CardMode = 'elevated' | 'outlined' | 'contained'; @@ -20,8 +17,8 @@ export type CardActionChildProps = { export const getCardCoverStyle = ({ theme, - index, - total, + index: _index, + total: _total, borderRadiusStyles, }: { theme: InternalTheme; @@ -29,7 +26,7 @@ export const getCardCoverStyle = ({ index?: number; total?: number; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (Object.keys(borderRadiusStyles).length > 0) { return { @@ -38,43 +35,13 @@ export const getCardCoverStyle = ({ }; } - if (isV3) { - return { - borderRadius: 3 * roundness, - }; - } - - if (index === 0) { - if (total === 1) { - return { - borderRadius: roundness, - }; - } - - return { - borderTopLeftRadius: roundness, - borderTopRightRadius: roundness, - }; - } - - if (typeof total === 'number' && index === total - 1) { - return { - borderBottomLeftRadius: roundness, - }; - } - - return undefined; + return { + borderRadius: 3 * roundness, + }; }; const getBorderColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.outline; - } - - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + return (theme as MD3Theme).colors.outline; }; const getBackgroundColor = ({ @@ -84,13 +51,12 @@ const getBackgroundColor = ({ theme: InternalTheme; isMode: (mode: CardMode) => boolean; }) => { - if (theme.isV3) { - if (isMode('contained')) { - return theme.colors.surfaceVariant; - } - if (isMode('outlined')) { - return theme.colors.surface; - } + const { colors } = theme as MD3Theme; + if (isMode('contained')) { + return colors.surfaceVariant; + } + if (isMode('outlined')) { + return colors.surface; } return undefined; }; diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx index 92ea124e62..869edd674a 100644 --- a/src/components/Checkbox/CheckboxItem.tsx +++ b/src/components/Checkbox/CheckboxItem.tsx @@ -166,10 +166,8 @@ const CheckboxItem = ({ checkbox = ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; + const disabledTextColor = theme.colors.onSurfaceDisabled; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -204,12 +202,7 @@ const CheckboxItem = ({ variant={labelVariant} testID={`${testID}-text`} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} - style={[ - styles.label, - !theme.isV3 && styles.font, - computedStyle, - labelStyle, - ]} + style={[styles.label, computedStyle, labelStyle]} > {label} @@ -238,7 +231,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Checkbox/utils.ts b/src/components/Checkbox/utils.ts index 81677d46b2..4ba3615836 100644 --- a/src/components/Checkbox/utils.ts +++ b/src/components/Checkbox/utils.ts @@ -13,11 +13,7 @@ const getAndroidCheckedColor = ({ return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getAndroidUncheckedColor = ({ @@ -31,15 +27,7 @@ const getAndroidUncheckedColor = ({ return customUncheckedColor; } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.7).rgb().string(); - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceVariant; }; const getAndroidRippleColor = ({ @@ -52,10 +40,7 @@ const getAndroidRippleColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); + return color(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); @@ -75,10 +60,7 @@ const getAndroidControlColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (checked) { @@ -127,21 +109,14 @@ const getIOSCheckedColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } if (customColor) { return customColor; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getIOSRippleColor = ({ @@ -154,10 +129,7 @@ const getIOSRippleColor = ({ disabled?: boolean; }) => { if (disabled) { - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.16).rgb().string(); - } - return color(theme.colors.text).alpha(0.16).rgb().string(); + return color(theme.colors.onSurface).alpha(0.16).rgb().string(); } return color(checkedColor).fade(0.32).rgb().string(); }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0e48e5c145..3706239b71 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -19,7 +19,7 @@ import useLatestCallback from 'use-latest-callback'; import { ChipAvatarProps, getChipColors } from './helpers'; import { useInternalTheme } from '../../core/theming'; import { white } from '../../styles/themes/v2/colors'; -import type { $Omit, EllipsizeProp, ThemeProp } from '../../types'; +import type { $Omit, EllipsizeProp, MD3Theme, ThemeProp } from '../../types'; import hasTouchHandler from '../../utils/hasTouchHandler'; import type { IconSource } from '../Icon'; import Icon from '../Icon'; @@ -212,11 +212,11 @@ const Chip = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, roundness } = theme; + const { roundness } = theme; const isWeb = Platform.OS === 'web'; const { current: elevation } = React.useRef( - new Animated.Value(isV3 && elevated ? 1 : 0) + new Animated.Value(elevated ? 1 : 0) ); const hasPassedTouchHandler = hasTouchHandler({ @@ -232,7 +232,7 @@ const Chip = ({ const { scale } = theme.animation; onPressIn?.(e); Animated.timing(elevation, { - toValue: isV3 ? (elevated ? 2 : 0) : 4, + toValue: elevated ? 2 : 0, duration: 200 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, @@ -243,16 +243,16 @@ const Chip = ({ const { scale } = theme.animation; onPressOut?.(e); Animated.timing(elevation, { - toValue: isV3 && elevated ? 1 : 0, + toValue: elevated ? 1 : 0, duration: 150 * scale, useNativeDriver: isWeb || Platform.constants.reactNativeVersion.minor <= 72, }).start(); }); - const opacity = isV3 ? 0.38 : 0.26; - const defaultBorderRadius = roundness * (isV3 ? 2 : 4); - const iconSize = isV3 ? 18 : 16; + const opacity = 0.38; + const defaultBorderRadius = roundness * 2; + const iconSize = 18; const { backgroundColor: customBackgroundColor, @@ -281,8 +281,8 @@ const Chip = ({ disabled, }; - const elevationStyle = isV3 || Platform.OS === 'android' ? elevation : 0; - const multiplier = isV3 ? (compact ? 1.5 : 2) : 1; + const elevationStyle = elevation; + const multiplier = compact ? 1.5 : 2; const labelSpacings = { marginRight: onClose ? 0 : 8 * multiplier, marginLeft: @@ -291,20 +291,17 @@ const Chip = ({ : 8 * multiplier, }; const contentSpacings = { - paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4, + paddingRight: onClose ? 34 : 0, }; const labelTextStyle = { color: textColor, - ...(isV3 ? theme.fonts.labelLarge : theme.fonts.regular), + ...(theme as MD3Theme).fonts.labelLarge, }; return ( - + {avatar && !icon ? ( @@ -358,12 +353,12 @@ const Chip = ({ - + {closeIcon ? ( ) : ( theme as MD3Theme; export type ChipAvatarProps = { style?: StyleProp; @@ -20,40 +21,25 @@ const getBorderColor = ({ isOutlined, disabled, selectedColor, - backgroundColor, + backgroundColor: _backgroundColor, }: BaseProps & { backgroundColor: string; selectedColor?: string }) => { const isSelectedColor = selectedColor !== undefined; + const { colors } = md3(theme); - if (theme.isV3) { - if (!isOutlined) { - // If the Chip mode is "flat", set border color to transparent - return 'transparent'; - } - - if (disabled) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - return theme.colors.outline; + if (!isOutlined) { + // If the Chip mode is "flat", set border color to transparent + return 'transparent'; } - if (isOutlined) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.29).rgb().string(); - } - - if (theme.dark) { - return color(white).alpha(0.29).rgb().string(); - } + if (disabled) { + return color(colors.onSurfaceVariant).alpha(0.12).rgb().string(); + } - return color(black).alpha(0.29).rgb().string(); + if (isSelectedColor) { + return color(selectedColor).alpha(0.29).rgb().string(); } - return backgroundColor; + return colors.outline; }; const getTextColor = ({ @@ -65,54 +51,32 @@ const getTextColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } - + const { colors } = md3(theme); if (disabled) { - return theme.colors.disabled; + return colors.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.87).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.87).rgb().string(); + return colors.onSecondaryContainer; }; const getDefaultBackgroundColor = ({ theme, isOutlined, }: Omit) => { - if (theme.isV3) { - if (isOutlined) { - return theme.colors.surface; - } - - return theme.colors.secondaryContainer; - } - + const { colors } = md3(theme); if (isOutlined) { - return theme.colors?.surface; - } - - if (theme.dark) { - return '#383838'; + return colors.surface; } - return '#ebebeb'; + return colors.secondaryContainer; }; const getBackgroundColor = ({ @@ -123,17 +87,16 @@ const getBackgroundColor = ({ }: BaseProps & { customBackgroundColor?: ColorValue; }) => { + const { colors } = md3(theme); if (typeof customBackgroundColor === 'string') { return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - if (isOutlined) { - return 'transparent'; - } - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); + if (disabled) { + if (isOutlined) { + return 'transparent'; } + return color(colors.onSurfaceVariant).alpha(0.12).rgb().string(); } return getDefaultBackgroundColor({ theme, isOutlined }); @@ -149,6 +112,7 @@ const getSelectedBackgroundColor = ({ customBackgroundColor?: ColorValue; showSelectedOverlay?: boolean; }) => { + const { colors } = md3(theme); const backgroundColor = getBackgroundColor({ theme, disabled, @@ -156,45 +120,30 @@ const getSelectedBackgroundColor = ({ customBackgroundColor, }); - if (theme.isV3) { - if (isOutlined) { - if (showSelectedOverlay) { - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0.12) - .rgb() - .string(); - } - return color(backgroundColor) - .mix(color(theme.colors.onSurfaceVariant), 0) - .rgb() - .string(); - } - + if (isOutlined) { if (showSelectedOverlay) { return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0.12) + .mix(color(colors.onSurfaceVariant), 0.12) .rgb() .string(); } - return color(backgroundColor) - .mix(color(theme.colors.onSecondaryContainer), 0) + .mix(color(colors.onSurfaceVariant), 0) .rgb() .string(); } - if (theme.dark) { - if (isOutlined) { - return color(backgroundColor).lighten(0.2).rgb().string(); - } - return color(backgroundColor).lighten(0.4).rgb().string(); - } - - if (isOutlined) { - return color(backgroundColor).darken(0.08).rgb().string(); + if (showSelectedOverlay) { + return color(backgroundColor) + .mix(color(colors.onSecondaryContainer), 0.12) + .rgb() + .string(); } - return color(backgroundColor).darken(0.2).rgb().string(); + return color(backgroundColor) + .mix(color(colors.onSecondaryContainer), 0) + .rgb() + .string(); }; const getIconColor = ({ @@ -206,31 +155,20 @@ const getIconColor = ({ selectedColor?: string; }) => { const isSelectedColor = selectedColor !== undefined; - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isSelectedColor) { - return selectedColor; - } - - if (isOutlined) { - return theme.colors.onSurfaceVariant; - } - - return theme.colors.onSecondaryContainer; - } - + const { colors } = md3(theme); if (disabled) { - return theme.colors.disabled; + return colors.onSurfaceDisabled; } if (isSelectedColor) { - return color(selectedColor).alpha(0.54).rgb().string(); + return selectedColor; + } + + if (isOutlined) { + return colors.onSurfaceVariant; } - return color(theme.colors.text).alpha(0.54).rgb().string(); + return colors.onSecondaryContainer; }; const getRippleColor = ({ @@ -238,7 +176,7 @@ const getRippleColor = ({ isOutlined, disabled, selectedColor, - selectedBackgroundColor, + selectedBackgroundColor: _selectedBackgroundColor, customRippleColor, }: BaseProps & { selectedBackgroundColor: string; @@ -257,19 +195,11 @@ const getRippleColor = ({ isOutlined, }); - if (theme.isV3) { - if (isSelectedColor) { - return color(selectedColor).alpha(0.12).rgb().string(); - } - - return color(textColor).alpha(0.12).rgb().string(); - } - if (isSelectedColor) { - return color(selectedColor).fade(0.5).rgb().string(); + return color(selectedColor).alpha(0.12).rgb().string(); } - return selectedBackgroundColor; + return color(textColor).alpha(0.12).rgb().string(); }; export const getChipColors = ({ diff --git a/src/components/DataTable/DataTableHeader.tsx b/src/components/DataTable/DataTableHeader.tsx index a4619ebb99..1fee2a02ab 100644 --- a/src/components/DataTable/DataTableHeader.tsx +++ b/src/components/DataTable/DataTableHeader.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; export type Props = React.ComponentPropsWithRef & { @@ -52,12 +49,7 @@ const DataTableHeader = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx index dd72dbe54f..c7a5375f82 100644 --- a/src/components/DataTable/DataTablePagination.tsx +++ b/src/components/DataTable/DataTablePagination.tsx @@ -108,7 +108,7 @@ const PaginationControls = ({ }: PaginationControlsProps) => { const theme = useInternalTheme(themeOverrides); - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; + const textColor = theme.colors.onSurface; return ( <> @@ -310,12 +310,7 @@ const DataTablePagination = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const labelColor = color( - theme.isV3 ? theme.colors.onSurface : theme?.colors.text - ) - .alpha(0.6) - .rgb() - .string(); + const labelColor = color(theme.colors.onSurface).alpha(0.6).rgb().string(); return ( { const theme = useInternalTheme(themeOverrides); - const borderBottomColor = theme.isV3 - ? theme.colors.surfaceVariant - : color(theme.dark ? white : black) - .alpha(0.12) - .rgb() - .string(); + const borderBottomColor = theme.colors.surfaceVariant; return ( { const { right, left } = useSafeAreaInsets(); const theme = useInternalTheme(themeOverrides); - const { isV3, dark, mode, colors, roundness } = theme; - const borderRadius = (isV3 ? 7 : 1) * roundness; + const { roundness, colors } = theme as MD3Theme; + const borderRadius = 7 * roundness; - const backgroundColorV2 = - dark && mode === 'adaptive' - ? overlay(DIALOG_ELEVATION, colors?.surface) - : colors?.surface; - const backgroundColor = isV3 - ? theme.colors.elevation.level3 - : backgroundColorV2; + const backgroundColor = colors.elevation.level3; return ( child != null && typeof child !== 'boolean') .map((child, i) => { - if (isV3) { - if (i === 0 && React.isValidElement(child)) { - return React.cloneElement(child, { - style: [{ marginTop: 24 }, child.props.style], - }); - } - } - - if ( - i === 0 && - React.isValidElement(child) && - child.type === DialogContent - ) { - // Dialog content is the first item, so we add a top padding + if (i === 0 && React.isValidElement(child)) { return React.cloneElement(child, { - style: [{ paddingTop: 24 }, child.props.style], + style: [{ marginTop: 24 }, child.props.style], }); } diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx index cabebd2fe2..7b34739da5 100644 --- a/src/components/Dialog/DialogActions.tsx +++ b/src/components/Dialog/DialogActions.tsx @@ -47,21 +47,18 @@ export type Props = React.ComponentPropsWithRef & { * ``` */ const DialogActions = (props: Props) => { - const { isV3 } = useInternalTheme(props.theme); + useInternalTheme(props.theme); const actionsLength = React.Children.toArray(props.children).length; return ( - + {React.Children.map(props.children, (child, i) => React.isValidElement(child) ? React.cloneElement(child, { compact: true, - uppercase: !isV3, + uppercase: false, style: [ - isV3 && { + { marginRight: i + 1 === actionsLength ? 0 : 8, }, child.props.style, @@ -76,12 +73,6 @@ const DialogActions = (props: Props) => { DialogActions.displayName = 'Dialog.Actions'; const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-end', - padding: 8, - }, v3Container: { flexDirection: 'row', flexGrow: 1, diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx index ad5841b93a..7682054003 100644 --- a/src/components/Dialog/DialogIcon.tsx +++ b/src/components/Dialog/DialogIcon.tsx @@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; +import type { MD3Theme } from '../../types'; import Icon, { IconSource } from '../Icon'; export type Props = { @@ -69,13 +70,10 @@ const DialogIcon = ({ theme: themeOverrides, }: Props) => { const theme = useInternalTheme(themeOverrides); - - if (!theme.isV3) { - return null; - } + const { colors } = theme as MD3Theme; //@ts-ignore - const iconColor = color || theme.colors.secondary; + const iconColor = color || colors.secondary; return ( diff --git a/src/components/Dialog/DialogScrollArea.tsx b/src/components/Dialog/DialogScrollArea.tsx index 66fdcef6a0..5deeb4a5e6 100644 --- a/src/components/Dialog/DialogScrollArea.tsx +++ b/src/components/Dialog/DialogScrollArea.tsx @@ -4,6 +4,7 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; +import type { MD3Theme } from '../../types'; export type Props = React.ComponentPropsWithRef & { /** @@ -50,22 +51,16 @@ export type Props = React.ComponentPropsWithRef & { */ const DialogScrollArea = (props: Props) => { const theme = useInternalTheme(props.theme); + const { colors } = theme as MD3Theme; const borderStyles = { - borderColor: theme.isV3 - ? theme.colors.surfaceVariant - : 'rgba(0, 0, 0, .12)', - borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, - borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth, + borderColor: colors.surfaceVariant, + borderTopWidth: 1, + borderBottomWidth: 1, }; return ( {props.children} diff --git a/src/components/Dialog/DialogTitle.tsx b/src/components/Dialog/DialogTitle.tsx index 9953fc506c..407acb68b3 100644 --- a/src/components/Dialog/DialogTitle.tsx +++ b/src/components/Dialog/DialogTitle.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; import { StyleProp, StyleSheet, TextStyle } from 'react-native'; import { useInternalTheme } from '../../core/theming'; -import type { ThemeProp } from '../../types'; +import type { MD3Theme, ThemeProp } from '../../types'; import Text from '../Typography/Text'; -import Title from '../Typography/v2/Title'; -export type Props = React.ComponentPropsWithRef & { +export type Props = React.ComponentPropsWithRef & { /** * Title text for the `DialogTitle`. */ @@ -53,24 +52,22 @@ const DialogTitle = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3, colors, fonts } = theme; - - const TextComponent = isV3 ? Text : Title; + const { colors, fonts } = theme as MD3Theme; const headerTextStyle = { - color: isV3 ? colors.onSurface : colors?.text, - ...(isV3 ? fonts.headlineSmall : {}), + color: colors.onSurface, + ...fonts.headlineSmall, }; return ( - {children} - + ); }; diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index be30d94c7c..c697a2a04a 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../core/theming'; -import { black, white } from '../styles/themes/v2/colors'; import type { $RemoveChildren, ThemeProp } from '../types'; export type Props = $RemoveChildren & { @@ -60,23 +57,17 @@ const Divider = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { dark: isDarkTheme, isV3 } = theme; - const dividerColor = isV3 - ? theme.colors.outlineVariant - : color(isDarkTheme ? white : black) - .alpha(0.12) - .rgb() - .string(); + const dividerColor = theme.colors.outlineVariant; return ( @@ -84,9 +75,6 @@ const Divider = ({ }; const styles = StyleSheet.create({ - leftInset: { - marginLeft: 72, - }, v3LeftInset: { marginLeft: 16, }, diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 9fb461e9c5..c10c7ac0b6 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -111,7 +111,6 @@ const DrawerCollapsedItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const { scale } = theme.animation; const [numOfLines, setNumOfLines] = React.useState(1); @@ -126,10 +125,6 @@ const DrawerCollapsedItem = ({ } }, [animScale, active]); - if (!isV3) { - return null; - } - const handlePressOut = () => { Animated.timing(animScale, { toValue: 1, @@ -163,7 +158,7 @@ const DrawerCollapsedItem = ({ const labelTextStyle = { color: labelColor, - ...(isV3 ? theme.fonts.labelMedium : {}), + ...theme.fonts.labelMedium, }; const icon = diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx index 604df1b83b..7af3d9fcf4 100644 --- a/src/components/Drawer/DrawerItem.tsx +++ b/src/components/Drawer/DrawerItem.tsx @@ -108,27 +108,17 @@ const DrawerItem = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { roundness, isV3 } = theme; + const { roundness } = theme; - const backgroundColor = active - ? isV3 - ? theme.colors.secondaryContainer - : color(theme.colors.primary).alpha(0.12).rgb().string() - : undefined; + const backgroundColor = active ? theme.colors.secondaryContainer : undefined; const contentColor = active - ? isV3 - ? theme.colors.onSecondaryContainer - : theme.colors.primary - : isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.68).rgb().string(); + ? theme.colors.onSecondaryContainer + : theme.colors.onSurfaceVariant; - const labelMargin = icon ? (isV3 ? 12 : 32) : 0; - const borderRadius = (isV3 ? 7 : 1) * roundness; - const rippleColor = isV3 - ? color(contentColor).alpha(0.12).rgb().string() - : undefined; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const labelMargin = icon ? 12 : 0; + const borderRadius = 7 * roundness; + const rippleColor = color(contentColor).alpha(0.12).rgb().string(); + const font = theme.fonts.labelLarge; return ( @@ -139,8 +129,8 @@ const DrawerItem = ({ onPress={onPress} style={[ styles.container, + styles.v3Container, { backgroundColor, borderRadius }, - isV3 && styles.v3Container, style, ]} accessibilityRole="button" @@ -150,7 +140,7 @@ const DrawerItem = ({ theme={theme} hitSlop={hitSlop} > - + {icon ? ( diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx index ed79c5e054..a701d38ad6 100644 --- a/src/components/Drawer/DrawerSection.tsx +++ b/src/components/Drawer/DrawerSection.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; -import color from 'color'; - import { useInternalTheme } from '../../core/theming'; import { MD3Colors } from '../../styles/themes/v3/tokens'; import type { ThemeProp } from '../../types'; @@ -73,17 +71,14 @@ const DrawerSection = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; - const titleColor = isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); - const titleMargin = isV3 ? 28 : 16; - const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium; + const titleColor = theme.colors.onSurfaceVariant; + const titleMargin = 28; + const font = theme.fonts.titleSmall; return ( {title && ( - + {title && ( )} diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index ecfe7e1c60..6b6964a4a9 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -129,7 +129,6 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { }; const SIZE = 56; -const SCALE = 0.9; /** * An animated, extending horizontally floating action button represents the primary action in an application. @@ -233,7 +232,7 @@ const AnimatedFAB = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const uppercase: boolean = uppercaseProp ?? !theme.isV3; + const uppercase: boolean = uppercaseProp ?? false; const isIOS = Platform.OS === 'ios'; const isWeb = Platform.OS === 'web'; const isAnimatedFromRight = animateFrom === 'right'; @@ -246,7 +245,7 @@ const AnimatedFAB = ({ const { current: animFAB } = React.useRef( new Animated.Value(0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null; @@ -257,7 +256,7 @@ const AnimatedFAB = ({ labelSize?.height ?? 0 ); - const borderRadius = SIZE / (isV3 ? 3.5 : 2); + const borderRadius = SIZE / 3.5; React.useEffect(() => { if (!isWeb) { @@ -364,17 +363,16 @@ const AnimatedFAB = ({ animFAB, }); - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const textStyle = { color: foregroundColor, ...font, }; - const md2Elevation = disabled || !isIOS ? 0 : 6; const md3Elevation = disabled || !isIOS ? 0 : 3; - const shadowStyle = isV3 ? styles.v3Shadow : styles.shadow; + const shadowStyle = styles.v3Shadow; const baseStyle = [ StyleSheet.absoluteFill, disabled ? styles.disabled : shadowStyle, @@ -396,32 +394,14 @@ const AnimatedFAB = ({ ], borderRadius, }, - !isV3 && { - elevation: md2Elevation, - }, styles.container, restStyle, ]} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} theme={theme} container > - + ( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp ?? !theme.isV3; + const uppercase = uppercaseProp ?? false; const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); - const { isV3, animation } = theme; + const { animation } = theme; const { scale } = animation; React.useEffect(() => { @@ -255,7 +255,7 @@ const FAB = forwardRef( const isFlatMode = mode === 'flat'; const iconSize = isLargeSize ? 36 : 24; const loadingIndicatorSize = isLargeSize ? 24 : 18; - const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium; + const font = theme.fonts.labelLarge; const extendedStyle = getExtendedFabStyle({ customSize, theme }); const textStyle = { @@ -282,13 +282,11 @@ const FAB = forwardRef( }, ], }, - !isV3 && styles.elevated, - !isV3 && disabled && styles.disabled, style, ]} pointerEvents={visible ? 'auto' : 'none'} testID={`${testID}-container`} - {...(isV3 && { elevation: md3Elevation })} + elevation={md3Elevation} container > ( ); const styles = StyleSheet.create({ - elevated: { - elevation: 6, - }, content: { flexDirection: 'row', alignItems: 'center', @@ -361,9 +356,6 @@ const styles = StyleSheet.create({ uppercaseLabel: { textTransform: 'uppercase', }, - disabled: { - elevation: 0, - }, }); export default FAB; diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index ca263e3499..de88de8185 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -250,7 +250,6 @@ const FABGroup = ({ >(null); const { scale } = theme.animation; - const { isV3 } = theme; React.useEffect(() => { if (open) { @@ -262,7 +261,7 @@ const FABGroup = ({ useNativeDriver: true, }), Animated.stagger( - isV3 ? 15 : 50 * scale, + 15, animations.current .map((animation) => Animated.timing(animation, { @@ -294,7 +293,7 @@ const FABGroup = ({ } }); } - }, [open, actions, backdrop, scale, isV3]); + }, [open, actions, backdrop, scale]); const close = () => onStateChange({ open: false }); const toggle = () => onStateChange({ open: !open }); @@ -326,14 +325,6 @@ const FABGroup = ({ : backdrop; const opacities = animations.current; - const scales = opacities.map((opacity) => - open - ? opacity.interpolate({ - inputRange: [0, 1], - outputRange: [0.5, 1], - }) - : 1 - ); const translations = opacities.map((opacity) => open @@ -395,7 +386,7 @@ const FABGroup = ({ {actions.map((it, i) => { const labelTextStyle = { color: it.labelTextColor ?? labelColor, - ...(isV3 ? theme.fonts.titleMedium : {}), + ...theme.fonts.titleMedium, }; const marginHorizontal = typeof it.size === 'undefined' || it.size === 'small' ? 24 : 16; @@ -430,7 +421,7 @@ const FABGroup = ({ {it.label && ( @@ -467,11 +454,10 @@ const FABGroup = ({ color={it.color} style={[ { - transform: [{ scale: scales[i] }], + transform: [{ translateY: translations[i] }], opacity: opacities[i], backgroundColor: stackedFABBackgroundColor, }, - isV3 && { transform: [{ translateY: translations[i] }] }, it.style, ]} accessibilityElementsHidden={true} diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts index e87d24019f..42dd05ff7e 100644 --- a/src/components/FAB/utils.ts +++ b/src/components/FAB/utils.ts @@ -9,9 +9,7 @@ import { import color from 'color'; -import { black, white } from '../../styles/themes/v2/colors'; import type { InternalTheme } from '../../types'; -import getContrastingColor from '../../utils/getContrastingColor'; type GetCombinedStylesProps = { isAnimatedFromRight: boolean; @@ -174,88 +172,60 @@ const getBackgroundColor = ({ return customBackgroundColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.primaryContainer; - } + if (disabled) { + return theme.colors.surfaceDisabled; + } - if (isVariant('secondary')) { - return theme.colors.secondaryContainer; - } + if (isVariant('primary')) { + return theme.colors.primaryContainer; + } - if (isVariant('tertiary')) { - return theme.colors.tertiaryContainer; - } + if (isVariant('secondary')) { + return theme.colors.secondaryContainer; + } - if (isVariant('surface')) { - return theme.colors.elevation.level3; - } + if (isVariant('tertiary')) { + return theme.colors.tertiaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.12).rgb().string(); - } - return color(black).alpha(0.12).rgb().string(); + if (isVariant('surface')) { + return theme.colors.elevation.level3; } - //@ts-ignore - return theme.colors?.accent; + return theme.colors.primaryContainer; }; const getForegroundColor = ({ theme, isVariant, disabled, - backgroundColor, customColor, -}: BaseProps & { backgroundColor: string; customColor?: string }) => { +}: BaseProps & { customColor?: string }) => { if (typeof customColor !== 'undefined' && !disabled) { return customColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (isVariant('primary')) { - return theme.colors.onPrimaryContainer; - } - - if (isVariant('secondary')) { - return theme.colors.onSecondaryContainer; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; + } - if (isVariant('tertiary')) { - return theme.colors.onTertiaryContainer; - } + if (isVariant('primary')) { + return theme.colors.onPrimaryContainer; + } - if (isVariant('surface')) { - return theme.colors.primary; - } + if (isVariant('secondary')) { + return theme.colors.onSecondaryContainer; } - if (disabled) { - if (theme.dark) { - return color(white).alpha(0.32).rgb().string(); - } - return color(black).alpha(0.32).rgb().string(); + if (isVariant('tertiary')) { + return theme.colors.onTertiaryContainer; } - if (backgroundColor) { - return getContrastingColor( - backgroundColor || white, - white, - 'rgba(0, 0, 0, .54)' - ); + if (isVariant('surface')) { + return theme.colors.primary; } - return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)'); + return theme.colors.onPrimaryContainer; }; export const getFABColors = ({ @@ -287,7 +257,6 @@ export const getFABColors = ({ const foregroundColor = getForegroundColor({ ...baseFABColorProps, customColor, - backgroundColor, }); return { @@ -299,15 +268,7 @@ export const getFABColors = ({ }; const getLabelColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.onSurface; - } - - if (theme.dark) { - return theme.colors.text; - } - - return color(theme.colors.text).fade(0.54).rgb().string(); + return theme.colors.onSurface; }; const getBackdropColor = ({ @@ -320,17 +281,11 @@ const getBackdropColor = ({ if (customBackdropColor) { return customBackdropColor; } - if (theme.isV3) { - return color(theme.colors.background).alpha(0.95).rgb().string(); - } - return theme.colors?.backdrop; + return color(theme.colors.background).alpha(0.95).rgb().string(); }; const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => { - if (theme.isV3) { - return theme.colors.elevation.level3; - } - return theme.colors.surface; + return theme.colors.elevation.level3; }; export const getFABGroupColors = ({ @@ -347,16 +302,6 @@ export const getFABGroupColors = ({ }; }; -const standardSize = { - height: 56, - width: 56, - borderRadius: 28, -}; -const smallSize = { - height: 40, - width: 40, - borderRadius: 28, -}; const v3SmallSize = { height: 40, width: 40, @@ -385,30 +330,18 @@ export const getFabStyle = ({ size: 'small' | 'medium' | 'large'; theme: InternalTheme; }) => { - const { isV3, roundness } = theme; + const { roundness } = theme; if (customSize) return getCustomFabSize(customSize, roundness); - if (isV3) { - switch (size) { - case 'small': - return { ...v3SmallSize, borderRadius: 3 * roundness }; - case 'medium': - return { ...v3MediumSize, borderRadius: 4 * roundness }; - case 'large': - return { ...v3LargeSize, borderRadius: 7 * roundness }; - } - } - - if (size === 'small') { - return smallSize; + switch (size) { + case 'small': + return { ...v3SmallSize, borderRadius: 3 * roundness }; + case 'medium': + return { ...v3MediumSize, borderRadius: 4 * roundness }; + case 'large': + return { ...v3LargeSize, borderRadius: 7 * roundness }; } - return standardSize; -}; - -const extended = { - height: 48, - paddingHorizontal: 16, }; const v3Extended = { @@ -424,16 +357,14 @@ const getExtendedFabDimensions = (customSize: number) => ({ export const getExtendedFabStyle = ({ customSize, - theme, + theme: _theme, }: { customSize?: number; theme: InternalTheme; }) => { if (customSize) return getExtendedFabDimensions(customSize); - const { isV3 } = theme; - - return isV3 ? v3Extended : extended; + return v3Extended; }; let cachedContext: CanvasRenderingContext2D | null = null; diff --git a/src/components/HelperText/utils.ts b/src/components/HelperText/utils.ts index 4134175416..ab9d2dde8e 100644 --- a/src/components/HelperText/utils.ts +++ b/src/components/HelperText/utils.ts @@ -1,5 +1,3 @@ -import color from 'color'; - import type { InternalTheme } from '../../types'; type BaseProps = { @@ -9,22 +7,14 @@ type BaseProps = { }; export function getTextColor({ theme, disabled, type }: BaseProps) { - const { colors, dark } = theme; + const { colors } = theme; if (type === 'error') { return colors?.error; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } else { - return theme.colors.onSurfaceVariant; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; } - - return color(theme?.colors?.text) - .alpha(dark ? 0.7 : 0.54) - .rgb() - .string(); + return theme.colors.onSurfaceVariant; } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b3d26c699d..b886e06fe2 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -122,8 +122,7 @@ const Icon = ({ typeof source === 'object' && source.direction && source.source ? source.source : source; - const iconColor = - color || (theme.isV3 ? theme.colors.onSurface : theme.colors.text); + const iconColor = color || theme.colors.onSurface; if (isImageSource(s)) { return ( diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 47a87901ca..2da6e12fcf 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -138,7 +138,6 @@ const IconButton = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const { isV3 } = theme; const IconComponent = animated ? CrossFadeIcon : Icon; @@ -153,10 +152,10 @@ const IconButton = forwardRef( customRippleColor, }); - const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5; + const buttonSize = size + 2 * PADDING; const { - borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0, + borderWidth = mode === 'outlined' && !selected ? 1 : 0, borderRadius = buttonSize / 2, } = (StyleSheet.flatten(style) || {}) as ViewStyle; @@ -178,11 +177,10 @@ const IconButton = forwardRef( }, styles.container, borderStyles, - !isV3 && disabled && styles.disabled, style, ]} container - {...(isV3 && { elevation: 0 })} + elevation={0} > { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - - return theme.colors.outline; + if (disabled) { + return theme.colors.surfaceDisabled; } - return undefined; + return theme.colors.outline; }; const getBackgroundColor = ({ @@ -38,40 +34,34 @@ const getBackgroundColor = ({ selected, customContainerColor, }: BaseProps & { customContainerColor?: string }) => { - if (theme.isV3) { - if (disabled) { - if (isMode('contained') || isMode('contained-tonal')) { - return theme.colors.surfaceDisabled; - } - } - - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (disabled) { + if (isMode('contained') || isMode('contained-tonal')) { + return theme.colors.surfaceDisabled; } + } - if (isMode('contained')) { - if (selected) { - return theme.colors.primary; - } - return theme.colors.surfaceVariant; - } + if (typeof customContainerColor !== 'undefined') { + return customContainerColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.secondaryContainer; - } - return theme.colors.surfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.primary; } + return theme.colors.surfaceVariant; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseSurface; - } + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.secondaryContainer; } + return theme.colors.surfaceVariant; } - if (typeof customContainerColor !== 'undefined') { - return customContainerColor; + if (isMode('outlined')) { + if (selected) { + return theme.colors.inverseSurface; + } } return undefined; @@ -84,65 +74,52 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: string }) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - if (typeof customIconColor !== 'undefined') { - return customIconColor; - } + if (disabled) { + return theme.colors.onSurfaceDisabled; + } - if (isMode('contained')) { - if (selected) { - return theme.colors.onPrimary; - } - return theme.colors.primary; - } + if (typeof customIconColor !== 'undefined') { + return customIconColor; + } - if (isMode('contained-tonal')) { - if (selected) { - return theme.colors.onSecondaryContainer; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained')) { + if (selected) { + return theme.colors.onPrimary; } + return theme.colors.primary; + } - if (isMode('outlined')) { - if (selected) { - return theme.colors.inverseOnSurface; - } - return theme.colors.onSurfaceVariant; + if (isMode('contained-tonal')) { + if (selected) { + return theme.colors.onSecondaryContainer; } + return theme.colors.onSurfaceVariant; + } + if (isMode('outlined')) { if (selected) { - return theme.colors.primary; + return theme.colors.inverseOnSurface; } return theme.colors.onSurfaceVariant; } - if (typeof customIconColor !== 'undefined') { - return customIconColor; + if (selected) { + return theme.colors.primary; } - - return theme.colors.text; + return theme.colors.onSurfaceVariant; }; const getRippleColor = ({ - theme, iconColor, customRippleColor, }: { - theme: InternalTheme; iconColor: string; customRippleColor?: ColorValue; }) => { if (customRippleColor) { return customRippleColor; } - if (theme.isV3) { - return color(iconColor).alpha(0.12).rgb().string(); - } - return color(iconColor).alpha(0.32).rgb().string(); + return color(iconColor).alpha(0.12).rgb().string(); }; export const getIconButtonColor = ({ @@ -184,7 +161,7 @@ export const getIconButtonColor = ({ ...baseIconColorProps, customContainerColor, }), - rippleColor: getRippleColor({ theme, iconColor, customRippleColor }), + rippleColor: getRippleColor({ iconColor, customRippleColor }), borderColor: getBorderColor({ theme, disabled }), }; }; diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index 75505c7367..ace8810a71 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -212,9 +212,6 @@ const ListAccordion = ({ const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -241,12 +238,11 @@ const ListAccordion = ({ ? groupContext.expandedId === id : expandedInternal; - const { titleColor, descriptionColor, titleTextColor, rippleColor } = - getAccordionColors({ - theme, - isExpanded, - customRippleColor, - }); + const { descriptionColor, titleTextColor, rippleColor } = getAccordionColors({ + theme, + isExpanded, + customRippleColor, + }); const handlePress = groupContext && id !== undefined @@ -256,7 +252,7 @@ const ListAccordion = ({ {left ? left({ color: isExpanded ? theme.colors?.primary : descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} - + {right ? ( right({ @@ -329,7 +322,7 @@ const ListAccordion = ({ ) : ( @@ -348,10 +341,7 @@ const ListAccordion = ({ !child.props.right ) { return React.cloneElement(child, { - style: [ - theme.isV3 ? styles.childV3 : styles.child, - child.props.style, - ], + style: [styles.child, child.props.style], theme, }); } @@ -367,17 +357,10 @@ ListAccordion.displayName = 'List.Accordion'; const styles = StyleSheet.create({ container: { - padding: 8, - }, - containerV3: { paddingVertical: 8, paddingRight: 24, }, row: { - flexDirection: 'row', - alignItems: 'center', - }, - rowV3: { flexDirection: 'row', marginVertical: 6, }, @@ -392,17 +375,14 @@ const styles = StyleSheet.create({ description: { fontSize: 14, }, - item: { + contentItem: { + paddingLeft: 16, + }, + trailingItem: { marginVertical: 6, paddingLeft: 8, }, - itemV3: { - paddingLeft: 16, - }, child: { - paddingLeft: 64, - }, - childV3: { paddingLeft: 40, }, content: { diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx index f1c7194c43..108d642383 100644 --- a/src/components/List/ListIcon.tsx +++ b/src/components/List/ListIcon.tsx @@ -51,10 +51,7 @@ const ListIcon = ({ const theme = useInternalTheme(themeOverrides); return ( - + ); @@ -62,13 +59,6 @@ const ListIcon = ({ const styles = StyleSheet.create({ item: { - margin: 8, - height: 40, - width: 40, - alignItems: 'center', - justifyContent: 'center', - }, - itemV3: { alignItems: 'center', justifyContent: 'center', }, diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx index 9839be7b02..8eb887bddc 100644 --- a/src/components/List/ListImage.tsx +++ b/src/components/List/ListImage.tsx @@ -7,7 +7,6 @@ import { ImageStyle, } from 'react-native'; -import { useInternalTheme } from '../../core/theming'; import type { ThemeProp } from '../../types'; export type Props = { @@ -42,16 +41,11 @@ const ListImage = ({ style, source, variant = 'image', - theme: themeOverrides, + theme: _theme, }: Props) => { - const theme = useInternalTheme(themeOverrides); const getStyles = () => { if (variant === 'video') { - if (!theme.isV3) { - return [style, styles.video]; - } - - return [style, styles.videoV3]; + return [style, styles.video]; } return [style, styles.image]; @@ -73,11 +67,6 @@ const styles = StyleSheet.create({ height: 56, }, video: { - width: 100, - height: 64, - marginLeft: 0, - }, - videoV3: { width: 114, height: 64, marginLeft: 0, diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 467eb9b67a..c50d075744 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import color from 'color'; - import { Style, getLeftStyles, getRightStyles } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types'; @@ -169,9 +167,6 @@ const ListItem = ( const onDescriptionTextLayout = ( event: NativeSyntheticEvent ) => { - if (!theme.isV3) { - return; - } const { nativeEvent } = event; setAlignToTop(nativeEvent.lines.length >= 2); }; @@ -206,9 +201,7 @@ const ListItem = ( }; const renderTitle = () => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; return typeof title === 'function' ? ( title({ @@ -230,32 +223,26 @@ const ListItem = ( ); }; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; return ( - + {left ? left({ color: descriptionColor, - style: getLeftStyles(alignToTop, description, theme.isV3), + style: getLeftStyles(alignToTop, description), }) : null} {renderTitle()} @@ -267,7 +254,7 @@ const ListItem = ( {right ? right({ color: descriptionColor, - style: getRightStyles(alignToTop, description, theme.isV3), + style: getRightStyles(alignToTop, description), }) : null} @@ -280,19 +267,12 @@ const Component = forwardRef(ListItem); const styles = StyleSheet.create({ container: { - padding: 8, - }, - containerV3: { paddingVertical: 8, paddingRight: 24, }, row: { width: '100%', flexDirection: 'row', - }, - rowV3: { - width: '100%', - flexDirection: 'row', marginVertical: 6, }, title: { @@ -302,10 +282,6 @@ const styles = StyleSheet.create({ fontSize: 14, }, item: { - marginVertical: 6, - paddingLeft: 8, - }, - itemV3: { paddingLeft: 16, }, content: { diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx index 038b86a86e..38e0a9d41f 100644 --- a/src/components/List/ListSubheader.tsx +++ b/src/components/List/ListSubheader.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { StyleProp, StyleSheet, TextStyle } from 'react-native'; -import color from 'color'; import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../core/theming'; @@ -43,11 +42,9 @@ const ListSubheader = ({ }: Props) => { const theme = useInternalTheme(overrideTheme); - const textColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const textColor = theme.colors.onSurfaceVariant; - const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium; + const font = theme.fonts.bodyMedium; return ( { - const stylesV3 = { - marginRight: 0, - marginLeft: 16, + const stylesV3: Style = { + ...stylesV3Left, alignSelf: alignToTop ? 'flex-start' : 'center', }; @@ -47,14 +48,10 @@ export const getLeftStyles = ( return { ...styles.iconMarginLeft, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginLeft; - } - return { ...styles.iconMarginLeft, ...stylesV3, @@ -63,11 +60,10 @@ export const getLeftStyles = ( export const getRightStyles = ( alignToTop: boolean, - description: Description, - isV3: boolean + description: Description ) => { - const stylesV3 = { - marginLeft: 16, + const stylesV3: Style = { + ...stylesV3Right, alignSelf: alignToTop ? 'flex-start' : 'center', }; @@ -75,14 +71,10 @@ export const getRightStyles = ( return { ...styles.iconMarginRight, ...styles.marginVerticalNone, - ...(isV3 && { ...stylesV3 }), + ...stylesV3, }; } - if (!isV3) { - return styles.iconMarginRight; - } - return { ...styles.iconMarginRight, ...stylesV3, @@ -104,13 +96,9 @@ export const getAccordionColors = ({ isExpanded?: boolean; customRippleColor?: ColorValue; }) => { - const titleColor = theme.isV3 - ? theme.colors.onSurface - : color(theme.colors.text).alpha(0.87).rgb().string(); + const titleColor = theme.colors.onSurface; - const descriptionColor = theme.isV3 - ? theme.colors.onSurfaceVariant - : color(theme.colors.text).alpha(0.54).rgb().string(); + const descriptionColor = theme.colors.onSurfaceVariant; const titleTextColor = isExpanded ? theme.colors?.primary : titleColor; @@ -118,7 +106,6 @@ export const getAccordionColors = ({ customRippleColor || color(titleTextColor).alpha(0.12).rgb().string(); return { - titleColor, descriptionColor, titleTextColor, rippleColor, diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 956b362562..9ac794021b 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -23,7 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import MenuItem from './MenuItem'; import { useInternalTheme } from '../../core/theming'; -import type { MD3Elevation, ThemeProp } from '../../types'; +import type { MD3Elevation, MD3Theme, ThemeProp } from '../../types'; import { ElevationLevels } from '../../types'; import { addEventListener } from '../../utils/addEventListener'; import { BackHandler } from '../../utils/BackHandler/BackHandler'; @@ -196,6 +196,7 @@ const Menu = ({ keyboardShouldPersistTaps, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { colors: md3Colors } = theme as MD3Theme; const insets = useSafeAreaInsets(); const [rendered, setRendered] = React.useState(visible); const [left, setLeft] = React.useState(0); @@ -618,7 +619,6 @@ const Menu = ({ }, ], borderRadius: theme.roundness, - ...(!theme.isV3 && { elevation: 8 }), ...(scrollableMenuHeight ? { height: scrollableMenuHeight } : {}), }; @@ -673,13 +673,13 @@ const Menu = ({ style={[ styles.shadowMenuContainer, shadowMenuContainerStyle, - theme.isV3 && { + { backgroundColor: - theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]], + md3Colors.elevation[ELEVATION_LEVELS_MAP[elevation]], }, contentStyle, ]} - {...(theme.isV3 && { elevation })} + elevation={elevation} testID={`${testID}-surface`} theme={theme} container diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4b8eb3740a..652ffc9a4f 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -18,7 +18,7 @@ import { MIN_WIDTH, } from './utils'; import { useInternalTheme } from '../../core/theming'; -import type { ThemeProp } from '../../types'; +import type { MD3Theme, ThemeProp } from '../../types'; import Icon, { IconSource } from '../Icon'; import TouchableRipple, { Props as TouchableRippleProps, @@ -156,16 +156,13 @@ const MenuItem = ({ disabled, customRippleColor, }); - const { isV3 } = theme; + const containerPadding = 12; - const containerPadding = isV3 ? 12 : 8; + const iconWidth = 24; - const iconWidth = isV3 ? 24 : 40; - - const minWidth = MIN_WIDTH - (isV3 ? 12 : 16); + const minWidth = MIN_WIDTH - 12; const maxWidth = getContentMaxWidth({ - isV3, iconWidth, leadingIcon, trailingIcon, @@ -173,7 +170,7 @@ const MenuItem = ({ const titleTextStyle = { color: titleColor, - ...(isV3 ? theme.fonts.bodyLarge : {}), + ...(theme as MD3Theme).fonts.bodyLarge, }; const newAccessibilityState = { ...accessibilityState, disabled }; @@ -198,22 +195,15 @@ const MenuItem = ({ > {leadingIcon ? ( - + ) : null} {title} - {isV3 && trailingIcon ? ( - + {trailingIcon ? ( + ) : null} @@ -257,12 +244,6 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', }, - title: { - fontSize: 16, - }, - item: { - marginHorizontal: 8, - }, content: { justifyContent: 'center', }, diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts index c1b6189ba4..71c503bcc2 100644 --- a/src/components/Menu/utils.ts +++ b/src/components/Menu/utils.ts @@ -2,15 +2,13 @@ import type { ColorValue } from 'react-native'; import color from 'color'; -import { black, white } from '../../styles/themes/v2/colors'; -import type { InternalTheme } from '../../types'; +import type { InternalTheme, MD3Theme } from '../../types'; import type { IconSource } from '../Icon'; export const MIN_WIDTH = 112; export const MAX_WIDTH = 280; type ContentProps = { - isV3: boolean; iconWidth: number; leadingIcon?: IconSource; trailingIcon?: IconSource; @@ -23,38 +21,25 @@ type ColorProps = { }; const getDisabledColor = (theme: InternalTheme) => { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.dark ? white : black) - .alpha(0.32) - .rgb() - .string(); + return (theme as MD3Theme).colors.onSurfaceDisabled; }; const getTitleColor = ({ theme, disabled }: ColorProps) => { + const { colors } = theme as MD3Theme; if (disabled) { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurface; - } - - return color(theme.colors.text).alpha(0.87).rgb().string(); + return colors.onSurface; }; const getIconColor = ({ theme, disabled }: ColorProps) => { + const { colors } = theme as MD3Theme; if (disabled) { return getDisabledColor(theme); } - if (theme.isV3) { - return theme.colors.onSurfaceVariant; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return colors.onSurfaceVariant; }; const getRippleColor = ({ @@ -65,11 +50,10 @@ const getRippleColor = ({ return customRippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); - } - - return undefined; + return color((theme as MD3Theme).colors.onSurfaceVariant) + .alpha(0.12) + .rgb() + .string(); }; export const getMenuItemColor = ({ @@ -85,26 +69,17 @@ export const getMenuItemColor = ({ }; export const getContentMaxWidth = ({ - isV3, iconWidth, leadingIcon, trailingIcon, }: ContentProps) => { - if (isV3) { - if (leadingIcon && trailingIcon) { - return MAX_WIDTH - (2 * iconWidth + 24); - } - - if (leadingIcon || trailingIcon) { - return MAX_WIDTH - (iconWidth + 24); - } - - return MAX_WIDTH - 12; + if (leadingIcon && trailingIcon) { + return MAX_WIDTH - (2 * iconWidth + 24); } - if (leadingIcon) { - return MAX_WIDTH - (iconWidth + 48); + if (leadingIcon || trailingIcon) { + return MAX_WIDTH - (iconWidth + 24); } - return MAX_WIDTH - 16; + return MAX_WIDTH - 12; }; diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 790204f4f8..c307df2479 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -10,8 +10,6 @@ import { ViewStyle, } from 'react-native'; -import setColor from 'color'; - import { useInternalTheme } from '../core/theming'; import type { ThemeProp } from '../types'; @@ -191,9 +189,7 @@ const ProgressBar = ({ }; const tintColor = color || theme.colors?.primary; - const trackTintColor = theme.isV3 - ? theme.colors.surfaceVariant - : setColor(tintColor).alpha(0.38).rgb().string(); + const trackTintColor = theme.colors.surfaceVariant; return ( ; } - const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text; - const disabledTextColor = theme.isV3 - ? theme.colors.onSurfaceDisabled - : theme.colors.disabled; + const textColor = theme.colors.onSurface; + const disabledTextColor = theme.colors.onSurfaceDisabled; const textAlign = isLeading ? 'right' : 'left'; const computedStyle = { @@ -232,12 +230,7 @@ const RadioButtonItem = ({ {isLeading && radioButton} {label} @@ -270,7 +263,4 @@ const styles = StyleSheet.create({ flexShrink: 1, flexGrow: 1, }, - font: { - fontSize: 16, - }, }); diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index 891df22945..6377899280 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -23,7 +23,7 @@ import IconButton from './IconButton/IconButton'; import MaterialCommunityIcon from './MaterialCommunityIcon'; import Surface from './Surface'; import { useInternalTheme } from '../core/theming'; -import type { ThemeProp } from '../types'; +import type { MD3Theme, ThemeProp } from '../types'; import { forwardRef } from '../utils/forwardRef'; interface Style { @@ -208,6 +208,7 @@ const Searchbar = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); + const { colors, fonts } = theme as MD3Theme; const root = React.useRef(null); React.useImperativeHandle(ref, () => ({ @@ -227,34 +228,26 @@ const Searchbar = forwardRef( onClearIconPress?.(e); }; - const { roundness, dark, isV3, fonts } = theme; + const { roundness, dark } = theme; - const placeholderTextColor = isV3 - ? theme.colors.onSurface - : theme.colors?.placeholder; - const textColor = isV3 ? theme.colors.onSurfaceVariant : theme.colors.text; - const md2IconColor = dark - ? textColor - : color(textColor).alpha(0.54).rgb().string(); - const iconColor = - customIconColor || (isV3 ? theme.colors.onSurfaceVariant : md2IconColor); + const placeholderTextColor = colors.onSurface; + const textColor = colors.onSurfaceVariant; + const iconColor = customIconColor || colors.onSurfaceVariant; const rippleColor = customRippleColor || color(textColor).alpha(0.32).rgb().string(); const traileringRippleColor = customTraileringRippleColor || color(textColor).alpha(0.32).rgb().string(); - const font = isV3 - ? { - ...fonts.bodyLarge, - lineHeight: Platform.select({ - ios: 0, - default: fonts.bodyLarge.lineHeight, - }), - } - : theme.fonts.regular; + const font = { + ...fonts.bodyLarge, + lineHeight: Platform.select({ + ios: 0, + default: fonts.bodyLarge.lineHeight, + }), + }; - const isBarMode = isV3 && mode === 'bar'; + const isBarMode = mode === 'bar'; const shouldRenderTraileringIcon = isBarMode && traileringIcon && @@ -265,16 +258,15 @@ const Searchbar = forwardRef( @@ -307,12 +299,12 @@ const Searchbar = forwardRef( ...font, ...Platform.select({ web: { outline: 'none' } }), }, - isV3 && (isBarMode ? styles.barModeInput : styles.viewModeInput), + isBarMode ? styles.barModeInput : styles.viewModeInput, inputStyle, ]} placeholder={placeholder || ''} placeholderTextColor={placeholderTextColor} - selectionColor={theme.colors?.primary} + selectionColor={colors.primary} underlineColorAndroid="transparent" returnKeyType="search" keyboardAppearance={dark ? 'dark' : 'light'} @@ -325,7 +317,7 @@ const Searchbar = forwardRef( {loading ? ( ) : ( // Clear icon should be always rendered within Searchbar – it's transparent, @@ -336,8 +328,8 @@ const Searchbar = forwardRef( pointerEvents={value ? 'auto' : 'none'} testID={`${testID}-icon-wrapper`} style={[ - isV3 && !value && styles.v3ClearIcon, - isV3 && right !== undefined && styles.v3ClearIconHidden, + !value && styles.v3ClearIcon, + right !== undefined && styles.v3ClearIconHidden, ]} > ( clearIcon || (({ size, color }) => ( ( accessibilityRole="button" borderless onPress={onTraileringIconPress} - iconColor={traileringIconColor || theme.colors.onSurfaceVariant} + iconColor={traileringIconColor || colors.onSurfaceVariant} rippleColor={traileringRippleColor} icon={traileringIcon} accessibilityLabel={traileringIconAccessibilityLabel} @@ -377,13 +369,13 @@ const Searchbar = forwardRef( ) : null} {isBarMode && right?.({ color: textColor, style: styles.rightStyle, testID })} - {isV3 && !isBarMode && showDivider && ( + {!isBarMode && showDivider && ( { if (checked) { - if (theme.isV3) { - return theme.colors.secondaryContainer; - } else { - return color(theme.colors.primary).alpha(0.12).rgb().string(); - } + return theme.colors.secondaryContainer; } return 'transparent'; }; -const getSegmentedButtonBorderColor = ({ - theme, - disabled, - checked, -}: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.surfaceDisabled; - } - return theme.colors.outline; - } - if (checked) { - return theme.colors.primary; +const getSegmentedButtonBorderColor = ({ theme, disabled }: BaseProps) => { + if (disabled) { + return theme.colors.surfaceDisabled; } - - return color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + return theme.colors.outline; }; const getSegmentedButtonBorderWidth = ({ - theme, + theme: _t, }: Omit) => { - if (theme.isV3) { - return 1; - } - - return StyleSheet.hairlineWidth; + return 1; }; const getSegmentedButtonTextColor = ({ @@ -133,21 +107,13 @@ const getSegmentedButtonTextColor = ({ checkedColor, uncheckedColor, }: SegmentedButtonProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - if (checked) { - return checkedColor ?? theme.colors.onSecondaryContainer; - } - return uncheckedColor ?? theme.colors.onSurface; - } - if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; + } + if (checked) { + return checkedColor ?? theme.colors.onSecondaryContainer; } - // Primary color is used for checked state too. - return theme.colors.primary; + return uncheckedColor ?? theme.colors.onSurface; }; export const getSegmentedButtonColors = ({ diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index d11bc91a62..22b55bb02a 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -20,7 +20,7 @@ import MaterialCommunityIcon from './MaterialCommunityIcon'; import Surface from './Surface'; import Text from './Typography/Text'; import { useInternalTheme } from '../core/theming'; -import type { $Omit, $RemoveChildren, ThemeProp } from '../types'; +import type { $Omit, $RemoveChildren, MD3Theme, ThemeProp } from '../types'; export type Props = $Omit, 'mode'> & { /** @@ -243,7 +243,7 @@ const Snackbar = ({ } }, [visible, handleOnVisible, handleOnHidden]); - const { colors, roundness, isV3 } = theme; + const { colors, roundness } = theme as MD3Theme; if (hidden) { return null; @@ -257,11 +257,11 @@ const Snackbar = ({ ...actionProps } = action || {}; - const buttonTextColor = isV3 ? colors.inversePrimary : colors.accent; - const textColor = isV3 ? colors.inverseOnSurface : colors?.surface; - const backgroundColor = isV3 ? colors.inverseSurface : colors?.onSurface; + const buttonTextColor = colors.inversePrimary; + const textColor = colors.inverseOnSurface; + const backgroundColor = colors.inverseSurface; - const isIconButton = isV3 && onIconPress; + const isIconButton = Boolean(onIconPress); const marginLeft = action ? -12 : -16; @@ -301,7 +301,6 @@ const Snackbar = ({ accessibilityLiveRegion="polite" theme={theme} style={[ - !isV3 && styles.elevation, styles.container, { backgroundColor, @@ -322,7 +321,7 @@ const Snackbar = ({ ]} testID={testID} container - {...(isV3 && { elevation })} + elevation={elevation} {...rest} > {renderChildrenWithWrapper()} @@ -336,7 +335,7 @@ const Snackbar = ({ }} style={[styles.button, actionStyle]} textColor={buttonTextColor} - compact={!isV3} + compact={false} mode="text" theme={theme} rippleColor={actionRippleColor} @@ -350,7 +349,7 @@ const Snackbar = ({ accessibilityRole="button" borderless onPress={onIconPress} - iconColor={theme.colors.inverseOnSurface} + iconColor={colors.inverseOnSurface} rippleColor={rippleColor} theme={theme} icon={ @@ -423,9 +422,6 @@ const styles = StyleSheet.create({ marginRight: 8, marginLeft: 4, }, - elevation: { - elevation: 6, - }, icon: { width: 40, height: 40, diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index 3b46d099e1..2c8fad2461 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -10,9 +10,9 @@ import { } from 'react-native'; import { useInternalTheme } from '../core/theming'; -import overlay, { isAnimatedValue } from '../styles/overlay'; +import { isAnimatedValue } from '../styles/overlay'; import shadow from '../styles/shadow'; -import type { ThemeProp, MD3Elevation } from '../types'; +import type { MD3Elevation, MD3Theme, ThemeProp } from '../types'; import { forwardRef } from '../utils/forwardRef'; import { splitStyles } from '../utils/splitStyles'; @@ -57,30 +57,6 @@ export type Props = Omit, 'style'> & { container?: boolean; }; -const MD2Surface = forwardRef( - ({ style, theme: overrideTheme, ...rest }: Omit, ref) => { - const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme); - - return ( - - ); - } -); - const outerLayerStyleProperties: (keyof ViewStyle)[] = [ 'position', 'alignSelf', @@ -277,14 +253,7 @@ const Surface = forwardRef( ) => { const theme = useInternalTheme(overridenTheme); - if (!theme.isV3) - return ( - - {children} - - ); - - const { colors } = theme; + const { colors } = theme as MD3Theme; const inputRange = [0, 1, 2, 3, 4, 5]; @@ -313,7 +282,7 @@ const Surface = forwardRef( testID={testID} style={[ { backgroundColor }, - elevation && isElevated ? shadow(elevation, theme.isV3) : null, + elevation && isElevated ? shadow(elevation) : null, style, ]} > diff --git a/src/components/Switch/utils.ts b/src/components/Switch/utils.ts index 2994495af9..34ffc26eb5 100644 --- a/src/components/Switch/utils.ts +++ b/src/components/Switch/utils.ts @@ -29,11 +29,7 @@ const getCheckedColor = ({ return color; } - if (theme.isV3) { - return theme.colors.primary; - } - - return theme.colors.accent; + return theme.colors.primary; }; const getThumbTintColor = ({ @@ -79,10 +75,7 @@ const getOnTintColor = ({ if (disabled) { if (theme.dark) { - if (theme.isV3) { - return setColor(white).alpha(0.06).rgb().string(); - } - return setColor(white).alpha(0.1).rgb().string(); + return setColor(white).alpha(0.06).rgb().string(); } return setColor(black).alpha(0.12).rgb().string(); } diff --git a/src/components/TextInput/Addons/Outline.tsx b/src/components/TextInput/Addons/Outline.tsx index 45b675fd8b..39ffa48b56 100644 --- a/src/components/TextInput/Addons/Outline.tsx +++ b/src/components/TextInput/Addons/Outline.tsx @@ -10,11 +10,9 @@ import { import { TextInputLabelProp } from '../types'; type OutlineProps = { - isV3: boolean; activeColor: string; backgroundColor: ColorValue; hasActiveOutline?: boolean; - focused?: boolean; outlineColor?: string; roundness?: number; label?: TextInputLabelProp; @@ -22,12 +20,10 @@ type OutlineProps = { }; export const Outline = ({ - isV3, label, activeColor, backgroundColor, hasActiveOutline, - focused, outlineColor, roundness, style, @@ -42,7 +38,7 @@ export const Outline = ({ { backgroundColor, borderRadius: roundness, - borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1, + borderWidth: hasActiveOutline ? 2 : 1, borderColor: hasActiveOutline ? activeColor : outlineColor, }, style, diff --git a/src/components/TextInput/Addons/Underline.tsx b/src/components/TextInput/Addons/Underline.tsx index 184cbe63b5..20b49233dc 100644 --- a/src/components/TextInput/Addons/Underline.tsx +++ b/src/components/TextInput/Addons/Underline.tsx @@ -3,8 +3,6 @@ import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import type { ThemeProp } from 'src/types'; -import { useInternalTheme } from '../../../core/theming'; - type UnderlineProps = { parentState: { focused: boolean; @@ -28,32 +26,28 @@ export const Underline = ({ underlineColorCustom, hasActiveOutline, style, - theme: themeOverrides, + theme: _themeOverrides, }: UnderlineProps) => { - const { isV3 } = useInternalTheme(themeOverrides); - let backgroundColor = parentState.focused ? activeColor : underlineColorCustom; if (error) backgroundColor = colors?.error; - const activeScale = isV3 ? 2 : 1; + const activeScale = 2; return ( = ({ forceFocus, paddingHorizontal, maxFontSizeMultiplier, - theme, disabled, }) => { if (adornmentConfig.length) { @@ -174,7 +168,6 @@ const TextInputAdornment: React.FunctionComponent = ({ return ( { const theme = useInternalTheme(themeOverrides); - const { AFFIX_OFFSET } = getConstants(theme.isV3); + const { AFFIX_OFFSET } = getConstants(); const { textStyle, diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index bd38ca64ab..8f4ce7c4df 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -69,7 +69,6 @@ const IconAdornment: React.FunctionComponent< icon: React.ReactNode; topPosition: number; side: 'left' | 'right'; - theme?: ThemeProp; disabled?: boolean; } & Omit > = ({ @@ -79,11 +78,9 @@ const IconAdornment: React.FunctionComponent< isTextInputFocused, forceFocus, testID, - theme: themeOverrides, disabled, }) => { - const { isV3 } = useInternalTheme(themeOverrides); - const { ICON_OFFSET } = getConstants(isV3); + const { ICON_OFFSET } = getConstants(); const style = { top: topPosition, diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts index e7dae2b487..38d9541706 100644 --- a/src/components/TextInput/Adornment/utils.ts +++ b/src/components/TextInput/Adornment/utils.ts @@ -1,5 +1,3 @@ -import color from 'color'; - import type { InternalTheme } from '../../../types'; type BaseProps = { @@ -8,16 +6,11 @@ type BaseProps = { }; export function getTextColor({ theme, disabled }: BaseProps) { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - return theme.colors.onSurfaceVariant; + if (disabled) { + return theme.colors.onSurfaceDisabled; } - return color(theme.colors?.text) - .alpha(theme.dark ? 0.7 : 0.54) - .rgb() - .string(); + + return theme.colors.onSurfaceVariant; } export function getIconColor({ @@ -36,10 +29,6 @@ export function getIconColor({ return customColor; } - if (!theme.isV3) { - return theme.colors.text; - } - if (disabled) { return theme.colors.onSurfaceDisabled; } diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index f0818f98f0..4877bc236e 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -48,12 +48,11 @@ const InputLabel = (props: InputLabelProps) => { labelTranslationXOffset, maxFontSizeMultiplier, testID, - isV3, inputContainerLayout, scaledLabel, } = props; - const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3); + const { INPUT_PADDING_HORIZONTAL } = getConstants(); const { width } = useWindowDimensions(); const isWeb = Platform.OS === 'web'; diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index 378366e176..ee8e438fb4 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -78,12 +78,12 @@ const TextInputFlat = ({ ...rest }: ChildTextInputProps) => { const isAndroid = Platform.OS === 'android'; - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -108,7 +108,6 @@ const TextInputFlat = ({ let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({ adornmentConfig, - isV3, }); if (isPaddingHorizontalPassed) { @@ -134,7 +133,6 @@ const TextInputFlat = ({ paddingHorizontal, inputOffset: FLAT_INPUT_OFFSET, mode: InputMode.Flat, - isV3, }); const { @@ -304,7 +302,6 @@ const TextInputFlat = ({ ? 1 : 0 : 1, - isV3, }; const affixTopPosition = { diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index 70b590fabb..0bd85fb8d9 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -81,12 +81,12 @@ const TextInputOutlined = ({ }: ChildTextInputProps) => { const adornmentConfig = getAdornmentConfig({ left, right }); - const { colors, isV3, roundness } = theme; - const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular; + const { colors, roundness } = theme; + const font = theme.fonts.bodyLarge; const hasActiveOutline = parentState.focused || error; const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } = - getConstants(isV3); + getConstants(); const { fontSize: fontSizeStyle, @@ -148,8 +148,8 @@ const TextInputOutlined = ({ if (isAdornmentLeftIcon) { labelTranslationXOffset = - (I18nManager.getConstants().isRTL ? -1 : 1) * - (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8)); + (I18nManager.getConstants().isRTL ? -1 : 1) * ADORNMENT_SIZE + + ADORNMENT_OFFSET; } const minInputHeight = @@ -254,7 +254,6 @@ const TextInputOutlined = ({ ? 1 : 0 : 1, - isV3, }; const onLayoutChange = React.useCallback( @@ -303,7 +302,6 @@ const TextInputOutlined = ({ rightAffixWidth, leftAffixWidth, mode: 'outlined', - isV3, }); const affixTopPosition = { [AdornmentSide.Left]: leftAffixTopPosition, @@ -344,12 +342,10 @@ const TextInputOutlined = ({ Otherwise the border will cut off the label on Android */} { const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = - getConstants(isV3); + getConstants(); let paddingLeft = LABEL_PADDING_HORIZONTAL; let paddingRight = LABEL_PADDING_HORIZONTAL; @@ -320,19 +309,11 @@ const getInputTextColor = ({ return textColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurface; - } - if (disabled) { - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceDisabled; } - return theme.colors.text; + return theme.colors.onSurface; }; const getActiveColor = ({ @@ -360,30 +341,18 @@ const getActiveColor = ({ } if (disabled) { - if (theme.isV3) { - return theme.colors.onSurfaceDisabled; - } - - return color(theme.colors.text).alpha(0.54).rgb().string(); + return theme.colors.onSurfaceDisabled; } return theme.colors.primary; }; const getPlaceholderColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - if (disabled) { - return theme.colors.disabled; + return theme.colors.onSurfaceDisabled; } - return theme.colors.placeholder; + return theme.colors.onSurfaceVariant; }; const getSelectionColor = ({ @@ -405,21 +374,11 @@ const getSelectionColor = ({ }; const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => { - if (theme.isV3) { - if (disabled) { - return color(theme.colors.onSurface).alpha(0.04).rgb().string(); - } else { - return theme.colors.surfaceVariant; - } - } - if (disabled) { - return undefined; + return color(theme.colors.onSurface).alpha(0.04).rgb().string(); } - return theme.dark - ? color(theme.colors?.background).lighten(0.24).rgb().string() - : color(theme.colors?.background).darken(0.06).rgb().string(); + return theme.colors.surfaceVariant; }; const getFlatUnderlineColor = ({ @@ -431,19 +390,11 @@ const getFlatUnderlineColor = ({ return underlineColor; } - if (theme.isV3) { - if (disabled) { - return theme.colors.onSurfaceDisabled; - } - - return theme.colors.onSurfaceVariant; - } - if (disabled) { - return 'transparent'; + return theme.colors.onSurfaceDisabled; } - return theme.colors.disabled; + return theme.colors.onSurfaceVariant; }; const getOutlinedOutlineInputColor = ({ @@ -451,30 +402,19 @@ const getOutlinedOutlineInputColor = ({ disabled, customOutlineColor, }: BaseProps & { customOutlineColor?: string }) => { - const isTransparent = color(customOutlineColor).alpha() === 0; - if (!disabled && customOutlineColor) { return customOutlineColor; } - if (theme.isV3) { - if (disabled) { - if (theme.dark) { - return 'transparent'; - } - return theme.colors.surfaceDisabled; + if (disabled) { + if (theme.dark) { + return 'transparent'; } - return theme.colors.outline; + return theme.colors.surfaceDisabled; } - if (disabled) { - if (isTransparent) { - return customOutlineColor; - } - return theme.colors.disabled; - } - return theme.colors.placeholder; + return theme.colors.outline; }; export const getFlatInputColors = ({ @@ -560,53 +500,17 @@ export const getOutlinedInputColors = ({ }; }; -export const getConstants = (isV3?: boolean) => { - // Text input affix - let AFFIX_OFFSET; - // Text input icon - let ICON_OFFSET; - //Text input flat - let LABEL_PADDING_TOP; - let LABEL_PADDING_HORIZONTAL; - let FLAT_INPUT_OFFSET; - let MIN_HEIGHT; - // Text input outlined; - let INPUT_PADDING_HORIZONTAL; - let ADORNMENT_OFFSET; - let OUTLINED_INPUT_OFFSET; - - if (isV3) { - AFFIX_OFFSET = MD3_AFFIX_OFFSET; - ICON_OFFSET = MD3_ICON_OFFSET; - LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD3_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET; - } else { - AFFIX_OFFSET = MD2_AFFIX_OFFSET; - ICON_OFFSET = MD2_ICON_OFFSET; - LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP; - LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL; - FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET; - MIN_HEIGHT = MD2_MIN_HEIGHT; - INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL; - ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET; - OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET; - } - +export const getConstants = () => { return { - AFFIX_OFFSET, - ICON_OFFSET, - LABEL_PADDING_TOP, - LABEL_PADDING_HORIZONTAL, - FLAT_INPUT_OFFSET, - MIN_HEIGHT, - INPUT_PADDING_HORIZONTAL, - ADORNMENT_OFFSET, - OUTLINED_INPUT_OFFSET, + AFFIX_OFFSET: MD3_AFFIX_OFFSET, + ICON_OFFSET: MD3_ICON_OFFSET, + LABEL_PADDING_TOP: MD3_LABEL_PADDING_TOP, + LABEL_PADDING_HORIZONTAL: MD3_LABEL_PADDING_HORIZONTAL, + FLAT_INPUT_OFFSET: MD3_FLAT_INPUT_OFFSET, + MIN_HEIGHT: MD3_MIN_HEIGHT, + INPUT_PADDING_HORIZONTAL: MD3_INPUT_PADDING_HORIZONTAL, + ADORNMENT_OFFSET: MD3_ADORNMENT_OFFSET, + OUTLINED_INPUT_OFFSET: MD3_OUTLINED_INPUT_OFFSET, MIN_WIDTH, }; }; diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 4ec2952366..1f710e4089 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -141,7 +141,6 @@ export type InputLabelProps = { inputContainerLayout: { width: number }; labelBackground?: any; maxFontSizeMultiplier?: number | undefined | null; - isV3?: boolean; scaledLabel?: boolean; } & LabelProps; diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index bfdd3fca5c..e115dec7ec 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -9,12 +9,9 @@ import { ColorValue, } from 'react-native'; -import color from 'color'; - import { ToggleButtonGroupContext } from './ToggleButtonGroup'; import { getToggleButtonColor } from './utils'; import { useInternalTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import type { ThemeProp } from '../../types'; import { forwardRef } from '../../utils/forwardRef'; import type { IconSource } from '../Icon'; @@ -128,12 +125,7 @@ const ToggleButton = forwardRef( (context && context.value === value) || status === 'checked'; const backgroundColor = getToggleButtonColor({ theme, checked }); - const borderColor = theme.isV3 - ? theme.colors.outline - : color(theme.dark ? white : black) - .alpha(0.29) - .rgb() - .string(); + const borderColor = theme.colors.outline; return ( { if (checked) { - if (theme.isV3) { - return color(theme.colors.onSecondaryContainer) - .alpha(tokens.md.ref.opacity.level2) - .rgb() - .string(); - } - if (theme.dark) { - return 'rgba(255, 255, 255, .12)'; - } - return 'rgba(0, 0, 0, .08)'; + return color(theme.colors.onSecondaryContainer) + .alpha(tokens.md.ref.opacity.level2) + .rgb() + .string(); } return 'transparent'; }; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index f5a483db5a..fdfef8571f 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -204,9 +204,7 @@ const Tooltip = ({ style={[ styles.tooltip, { - backgroundColor: theme.isV3 - ? theme.colors.onSurface - : theme.colors.tooltip, + backgroundColor: theme.colors.onSurface, ...getTooltipPosition( measurement as Measurement, children as React.ReactElement diff --git a/src/components/TouchableRipple/utils.ts b/src/components/TouchableRipple/utils.ts index 29c2b18e25..e3a1e9726f 100644 --- a/src/components/TouchableRipple/utils.ts +++ b/src/components/TouchableRipple/utils.ts @@ -5,11 +5,9 @@ import color from 'color'; import type { InternalTheme } from '../../types'; const getUnderlayColor = ({ - theme, calculatedRippleColor, underlayColor, }: { - theme: InternalTheme; calculatedRippleColor: ColorValue; underlayColor?: string; }) => { @@ -17,11 +15,7 @@ const getUnderlayColor = ({ return underlayColor; } - if (theme.isV3) { - return color(calculatedRippleColor).rgb().string(); - } - - return color(calculatedRippleColor).fade(0.5).rgb().string(); + return color(calculatedRippleColor).rgb().string(); }; const getRippleColor = ({ @@ -35,14 +29,7 @@ const getRippleColor = ({ return rippleColor; } - if (theme.isV3) { - return color(theme.colors.onSurface).alpha(0.12).rgb().string(); - } - - if (theme.dark) { - return color(theme.colors.text).alpha(0.32).rgb().string(); - } - return color(theme.colors.text).alpha(0.2).rgb().string(); + return color(theme.colors.onSurface).alpha(0.12).rgb().string(); }; export const getTouchableRippleColors = ({ @@ -58,7 +45,6 @@ export const getTouchableRippleColors = ({ return { calculatedRippleColor, calculatedUnderlayColor: getUnderlayColor({ - theme, calculatedRippleColor, underlayColor, }), diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx index 6504ad4b92..19872e2d93 100644 --- a/src/components/Typography/AnimatedText.tsx +++ b/src/components/Typography/AnimatedText.tsx @@ -50,7 +50,7 @@ const AnimatedText = forwardRef>( const theme = useInternalTheme(themeOverrides); const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; - if (theme.isV3 && variant) { + if (variant) { const font = theme.fonts[variant]; if (typeof font !== 'object') { throw new Error( @@ -73,10 +73,10 @@ const AnimatedText = forwardRef>( /> ); } else { - const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium; + const font = theme.fonts.bodyMedium; const textStyle = { ...font, - color: theme.isV3 ? theme.colors.onSurface : theme.colors.text, + color: theme.colors.onSurface, }; return ( root.current?.setNativeProps(args), })); - if (theme.isV3 && variant) { + if (variant) { let font = theme.fonts[variant]; let textStyle = [font, style]; @@ -155,10 +155,10 @@ const Text = ( /> ); } else { - const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular; + const font = theme.fonts.default; const textStyle = { ...font, - color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text, + color: theme.colors?.onSurface, }; return ( & { const StyledText = ({ alpha = 1, - family, + family: _family, style, theme: themeOverrides, ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const textColor = color( - theme.isV3 ? theme.colors.onSurface : theme.colors?.text - ) - .alpha(alpha) - .rgb() - .string(); + const textColor = color(theme.colors.onSurface).alpha(alpha).rgb().string(); const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'; return ( @@ -38,7 +33,6 @@ const StyledText = ({ styles.text, { color: textColor, - ...(!theme.isV3 && theme.fonts?.[family]), writingDirection, }, style, diff --git a/src/components/Typography/v2/Text.tsx b/src/components/Typography/v2/Text.tsx index 8114915189..4e10eecf54 100644 --- a/src/components/Typography/v2/Text.tsx +++ b/src/components/Typography/v2/Text.tsx @@ -6,7 +6,7 @@ import { TextStyle, } from 'react-native'; -import type { MD2Theme } from 'src/types'; +import type { ThemeProp } from 'src/types'; import { useInternalTheme } from '../../../core/theming'; import { forwardRef } from '../../../utils/forwardRef'; @@ -16,7 +16,7 @@ type Props = React.ComponentProps & { /** * @optional */ - theme?: MD2Theme; + theme?: ThemeProp; }; // @component-group Typography @@ -43,8 +43,7 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = ( ref={root} style={[ { - ...(!theme.isV3 && theme.fonts?.regular), - color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text, + color: theme.colors?.onSurface, }, styles.text, style, diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 6f76dab75b..60a7827b6e 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -1,12 +1,10 @@ import React from 'react'; -import { Animated, Platform } from 'react-native'; +import { Animated } from 'react-native'; import { act, render } from '@testing-library/react-native'; import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; -import PaperProvider from '../../../core/PaperProvider'; import { getTheme } from '../../../core/theming'; -import overlay from '../../../styles/overlay'; import { tokens } from '../../../styles/themes/v3/tokens'; import Appbar from '../../Appbar'; import { @@ -17,7 +15,6 @@ import { } from '../../Appbar/utils'; import Menu from '../../Menu/Menu'; import Searchbar from '../../Searchbar'; -import Tooltip from '../../Tooltip/Tooltip'; import Text from '../../Typography/Text'; const renderAppbarContent = utilRenderAppbarContent as ( @@ -58,7 +55,6 @@ describe('renderAppbarContent', () => { it('should render all children types if renderOnly is not specified', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, }); @@ -68,7 +64,6 @@ describe('renderAppbarContent', () => { it('should render all children types except specified in renderExcept', () => { const result = renderAppbarContent({ - isV3: false, children: [ ...children, { it('should render only children types specifed in renderOnly', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Action'], @@ -104,7 +98,6 @@ describe('renderAppbarContent', () => { it('should render AppbarContent with correct mode', () => { const result = renderAppbarContent({ - isV3: false, children, isDark: false, renderOnly: ['Appbar.Content'], @@ -115,87 +108,34 @@ describe('renderAppbarContent', () => { }); it('should render centered AppbarContent', () => { - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: true, - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult()[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - - expect(renderResult(false)[0].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should not render centered AppbarContent for Android, if not V3', () => { - Platform.OS = 'android'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); - - const centerAlignedContent = { - alignItems: 'center', - }; - - expect(renderResult(false)[0].props.style).not.toEqual( - expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) - ); - }); - - it('should render centered AppbarContent always for iOS, if not V3', () => { - Platform.OS = 'ios'; - const renderResult = (isV3 = true) => - renderAppbarContent({ - children, - isDark: false, - isV3, - renderOnly: ['Appbar.Content'], - mode: 'center-aligned', - shouldCenterContent: !isV3 && Platform.OS === 'ios', - }); + const result = renderAppbarContent({ + children, + isDark: false, + renderOnly: ['Appbar.Content'], + mode: 'center-aligned', + shouldCenterContent: true, + }); const centerAlignedContent = { alignItems: 'center', }; - expect(renderResult(false)[0].props.style).toEqual( + expect(result[0].props.style).toEqual( expect.arrayContaining([expect.objectContaining(centerAlignedContent)]) ); }); it('should render AppbarContent with correct spacings', () => { - const renderResult = (isV3 = true, withAppbarBackAction = false) => + const renderResult = (withAppbarBackAction = false) => renderAppbarContent({ children, isDark: false, - isV3, renderOnly: [ 'Appbar.Content', withAppbarBackAction && 'Appbar.BackAction', ], }); - const v2Spacing = { - marginLeft: 8, - }; - const v3Spacing = { marginLeft: 12, }; @@ -203,10 +143,6 @@ describe('renderAppbarContent', () => { expect(renderResult()[0].props.style).toEqual( expect.arrayContaining([expect.objectContaining(v3Spacing)]) ); - - expect(renderResult(false, true)[1].props.style).toEqual( - expect.arrayContaining([expect.objectContaining(v2Spacing)]) - ); }); it('Is recognized as a header when no onPress callback has been pressed', () => { @@ -321,40 +257,6 @@ describe('AppbarAction', () => { .children; expect(appbarBackActionIcon.props.color).toBe('purple'); }); - - describe('When V2', () => { - const theme = { isV3: false }; - - it('should be rendered with the right color when no color is passed', () => { - const { getByTestId } = render( - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - - it('should be rendered with the right color when no color is passed but is wrapped by a Tooltip', () => { - const { getByTestId } = render( - - - - - - - - ); - - const appbarActionIcon = getByTestId('cross-fade-icon-current').props - .children; - - expect(appbarActionIcon.props.color).toBe('#ffffff'); - }); - }); }); describe('AppbarContent', () => { @@ -410,18 +312,6 @@ describe('getAppbarColors', () => { tokens.md.ref.palette.neutral10 ); }); - - it('should return v2 light color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(false, false), elevation)).toBe( - '#6200ee' - ); - }); - - it('should return v2 dark color if theme version is 2', () => { - expect(getAppbarBackgroundColor(getTheme(true, false), elevation)).toBe( - overlay(elevation, '#121212') - ); - }); }); describe('animated value changes correctly', () => { diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index 4a62c376d8..14afac63f3 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -679,7 +679,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A "letterSpacing": 0, "lineHeight": 28, }, - false, undefined, ], ], diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx index 8e0d8c90d1..048bfa7275 100644 --- a/src/components/__tests__/Banner.test.tsx +++ b/src/components/__tests__/Banner.test.tsx @@ -91,7 +91,7 @@ it('render visible banner, with custom theme', () => { visible theme={{ colors: { - text: '#00f', + onSurface: '#00f', surface: '#ccc', primary: '#043', }, diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 43c1e9383b..f5bdeced00 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -2,10 +2,8 @@ import * as React from 'react'; import { Animated, Easing, Platform, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { red300 } from '../../styles/themes/v2/colors'; import { MD3Colors } from '../../styles/themes/v3/tokens'; import BottomNavigation from '../BottomNavigation/BottomNavigation'; import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen'; @@ -18,7 +16,7 @@ import Icon from '../Icon'; const styles = StyleSheet.create({ backgroundColor: { - backgroundColor: red300, + backgroundColor: MD3Colors.error60, }, }); @@ -378,7 +376,7 @@ it('renders custom background color passed to barStyle property', () => { ); const wrapper = getByTestId('bottom-navigation-bar-content'); - expect(wrapper).toHaveStyle({ backgroundColor: red300 }); + expect(wrapper).toHaveStyle({ backgroundColor: MD3Colors.error60 }); }); it('renders a single tab', () => { @@ -446,7 +444,7 @@ it('does not apply maxTabBarWidth styling if compact prop is falsy', () => { }); }); -it('displays ripple animation view if shifting is truthy', () => { +it('renders bar content when shifting is enabled', () => { const { getByTestId } = render( { renderScene={({ route }) => route.title} getLazy={({ route }) => route.key === 'key-2'} testID="bottom-navigation" - theme={{ isV3: false }} shifting /> ); - expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined(); + expect(getByTestId('bottom-navigation-bar-content')).toBeDefined(); }); -it('does not display ripple animation view if shifting is falsy', () => { +it('does not render legacy ripple overlay when shifting is disabled', () => { const { queryByTestId } = render( { describe('getActiveTintColor', () => { it.each` - activeColor | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.secondary10} - ${undefined} | ${'#fff'} | ${false} | ${'#fff'} + activeColor | expected + ${'#FBF7DB'} | ${'#FBF7DB'} + ${undefined} | ${MD3Colors.secondary10} `( - 'returns $expected when activeColor: $activeColor and useV3: $useV3', - ({ activeColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); - const color = getActiveTintColor({ activeColor, defaultColor, theme }); - expect(color).toBe(expected); + 'returns $expected when activeColor: $activeColor', + ({ activeColor, expected }) => { + const theme = getTheme(false); + const result = getActiveTintColor({ activeColor, theme }); + expect(result).toBe(expected); } ); }); describe('getInactiveTintColor', () => { it.each` - inactiveColor | defaultColor | useV3 | expected - ${'#853D4B'} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${'#fff'} | ${false} | ${color('#fff').alpha(0.5).rgb().string()} + inactiveColor | expected + ${'#853D4B'} | ${'#853D4B'} + ${undefined} | ${MD3Colors.neutralVariant30} `( - 'returns $expected when inactiveColor: $inactiveColor and useV3: $useV3', - ({ inactiveColor, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); - const color = getInactiveTintColor({ + 'returns $expected when inactiveColor: $inactiveColor', + ({ inactiveColor, expected }) => { + const theme = getTheme(false); + const result = getInactiveTintColor({ inactiveColor, - defaultColor, theme, }); - expect(color).toBe(expected); + expect(result).toBe(expected); } ); }); describe('getLabelColor', () => { it.each` - tintColor | focused | defaultColor | useV3 | expected - ${'#FBF7DB'} | ${true} | ${'#fff'} | ${true} | ${'#FBF7DB'} - ${'#853D4B'} | ${true} | ${'#fff'} | ${true} | ${'#853D4B'} - ${undefined} | ${true} | ${'#fff'} | ${true} | ${MD3Colors.neutral10} - ${undefined} | ${false} | ${'#fff'} | ${true} | ${MD3Colors.neutralVariant30} - ${undefined} | ${false} | ${'#fff'} | ${false} | ${'#fff'} - ${undefined} | ${true} | ${'#fff'} | ${false} | ${'#fff'} + tintColor | focused | expected + ${'#FBF7DB'} | ${true} | ${'#FBF7DB'} + ${'#853D4B'} | ${true} | ${'#853D4B'} + ${undefined} | ${true} | ${MD3Colors.neutral10} + ${undefined} | ${false} | ${MD3Colors.neutralVariant30} `( - 'returns $expected when tintColor: $tintColor, focused: $focused useV3: $useV3', - ({ tintColor, focused, defaultColor, useV3, expected }) => { - const theme = getTheme(false, useV3); - const color = getLabelColor({ - tintColor, + 'returns $expected when tintColor: $tintColor, focused: $focused', + ({ tintColor, focused, expected }) => { + const theme = getTheme(false); + const result = getLabelColor({ + tintColor: tintColor ?? '', hasColor: Boolean(tintColor), focused, - defaultColor, theme, }); - expect(color).toBe(expected); + expect(result).toBe(expected); } ); }); diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 8917eaca92..3d16801c15 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { act, fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, pink500, white } from '../../styles/themes/v2/colors'; +import { pink500, white } from '../../styles/themes/v2/colors'; import Button from '../Button/Button'; import { getButtonColors } from '../Button/utils'; @@ -461,95 +460,6 @@ describe('getButtonColors - background color', () => { }); }) ); - - it('should return correct theme color, for theme version 2, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.primary, - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct theme color, for theme version 2, when disabled, dark theme, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'contained', - disabled: true, - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, when disabled, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - disabled: true, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme color, for theme version 2, when disabled, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - disabled: true, - }) - ).toMatchObject({ - backgroundColor: 'transparent', - }); - }) - ); }); describe('getButtonColors - text color', () => { @@ -675,68 +585,6 @@ describe('getButtonColors - text color', () => { textColor: getTheme(true).colors.onSecondaryContainer, }); }); - - it('should return correct theme text color, for theme version 2, when disabled, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, when disabled, dark theme, no matter what the mode is', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - disabled: true, - mode: 'text', - }) - ).toMatchObject({ - textColor: color(white).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct theme text color, for theme version 2, contained mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'contained', - dark: true, - }) - ).toMatchObject({ - textColor: '#ffffff', - }); - }); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme text color, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }) - ); - - (['text', 'outlined'] as const).forEach((mode) => - it(`should return correct theme text color, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode, - }) - ).toMatchObject({ - textColor: getTheme(true, false).colors.primary, - }); - }) - ); }); describe('getButtonColors - border color', () => { @@ -813,56 +661,6 @@ describe('getButtonColors - border color', () => { }); }) ); - - it('should return correct border color, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return correct border color, for theme version 2, dark theme, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(true, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( - (mode) => - it(`should return transparent border, for theme version 2, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - borderColor: 'transparent', - }); - }) - ); - - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( - (mode) => - it(`should return transparent border, for theme version 2, dark theme, ${mode} mode`, () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode, - }) - ).toMatchObject({ - borderColor: 'transparent', - }); - }) - ); }); describe('getButtonColors - border width', () => { @@ -877,17 +675,6 @@ describe('getButtonColors - border width', () => { }); }); - it('should return correct border width, for theme version 2, outlined mode', () => { - expect( - getButtonColors({ - theme: getTheme(false, false), - mode: 'outlined', - }) - ).toMatchObject({ - borderWidth: StyleSheet.hairlineWidth, - }); - }); - (['text', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct border width, for ${mode} mode`, () => { diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 3da4aa2c51..a7dc736c62 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -2,10 +2,8 @@ import React from 'react'; import { Animated, StyleSheet, Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../../core/theming'; -import { black, white } from '../../../styles/themes/v2/colors'; import { MD3Colors } from '../../../styles/themes/v3/tokens'; import Button from '../../Button/Button'; import Card from '../../Card/Card'; @@ -193,15 +191,6 @@ describe('getCardColors - background color', () => { }) ).toMatchObject({ backgroundColor: undefined }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ backgroundColor: undefined }); - }); }); describe('getCardColors - border color', () => { @@ -213,28 +202,6 @@ describe('getCardColors - border color', () => { }) ).toMatchObject({ borderColor: getTheme().colors.outline }); }); - - it('should return correct color, for theme version 2, dark mode', () => { - expect( - getCardColors({ - theme: getTheme(true, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct color, for theme version 2, light mode', () => { - expect( - getCardColors({ - theme: getTheme(false, false), - mode: undefined as any, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.12).rgb().string(), - }); - }); }); describe('getCardCoverStyle - border radius', () => { @@ -255,44 +222,6 @@ describe('getCardCoverStyle - border radius', () => { }) ).toMatchObject({ borderRadius: 3 * getTheme().roundness }); }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 1, - }) - ).toMatchObject({ borderRadius: getTheme(false, false).roundness }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is 0 and total is other than 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 0, - total: 2, - }) - ).toMatchObject({ - borderTopLeftRadius: getTheme(false, false).roundness, - borderTopRightRadius: getTheme(false, false).roundness, - }); - }); - - it('should return correct border radius based on roundness, for theme version 2, when index is equal to total - 1', () => { - expect( - getCardCoverStyle({ - theme: getTheme(false, false), - borderRadiusStyles: {}, - index: 1, - total: 2, - }) - ).toMatchObject({ - borderBottomLeftRadius: getTheme(false, false).roundness, - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index b5f1d87e77..dbd992a134 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -163,7 +163,6 @@ exports[`can render leading checkbox control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "right", @@ -261,7 +260,6 @@ exports[`can render the Android checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -478,7 +476,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -659,7 +656,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", diff --git a/src/components/__tests__/Checkbox/utils.test.tsx b/src/components/__tests__/Checkbox/utils.test.tsx index 580e3dbedf..3e551140c5 100644 --- a/src/components/__tests__/Checkbox/utils.test.tsx +++ b/src/components/__tests__/Checkbox/utils.test.tsx @@ -22,21 +22,6 @@ describe('getAndroidSelectionControlColor - ripple color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - it('should return custom color', () => { expect( getAndroidSelectionControlColor({ @@ -59,20 +44,6 @@ describe('getAndroidSelectionControlColor - ripple color', () => { rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: false, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), - }); - }); }); describe('getAndroidSelectionControlColor - checkbox color', () => { @@ -88,18 +59,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, checked', () => { expect( getAndroidSelectionControlColor({ @@ -123,17 +82,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { }); }); - it('should return theme color, for theme version 2, checked', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: true, - }) - ).toMatchObject({ - selectionControlColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color, unchecked', () => { expect( getAndroidSelectionControlColor({ @@ -156,34 +104,6 @@ describe('getAndroidSelectionControlColor - checkbox color', () => { selectionControlColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return theme color, for theme version 2, unchecked, dark mode', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(true, false), - checked: false, - }) - ).toMatchObject({ - selectionControlColor: color(getTheme(true, false).colors.text) - .alpha(0.7) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, unchecked, light mode', () => { - expect( - getAndroidSelectionControlColor({ - theme: getTheme(false, false), - checked: false, - }) - ).toMatchObject({ - selectionControlColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getSelectionControlIOSColor - ripple color', () => { @@ -201,20 +121,6 @@ describe('getSelectionControlIOSColor - ripple color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.16) - .rgb() - .string(), - }); - }); - it('should return custom color', () => { expect( getSelectionControlIOSColor({ @@ -235,19 +141,6 @@ describe('getSelectionControlIOSColor - ripple color', () => { rippleColor: color(getTheme().colors.primary).fade(0.32).rgb().string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.accent) - .fade(0.32) - .rgb() - .string(), - }); - }); }); describe('getSelectionControlIOSColor - checked color', () => { @@ -262,17 +155,6 @@ describe('getSelectionControlIOSColor - checked color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, checked', () => { expect( getSelectionControlIOSColor({ @@ -293,14 +175,4 @@ describe('getSelectionControlIOSColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2, checked', () => { - expect( - getSelectionControlIOSColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index ca3055e35b..6c0e851f22 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -5,7 +5,6 @@ import { act, render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Chip from '../Chip/Chip'; import { getChipColors } from '../Chip/helpers'; @@ -104,18 +103,6 @@ describe('getChipColors - text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getChipColors({ - disabled: true, - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3, flat mode', () => { expect( getChipColors({ @@ -138,20 +125,6 @@ describe('getChipColors - text color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - textColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); - it('should return custom color, for theme version 3', () => { expect( getChipColors({ @@ -163,18 +136,6 @@ describe('getChipColors - text color', () => { textColor: 'purple', }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - textColor: color('purple').alpha(0.87).rgb().string(), - }); - }); }); describe('getChipColors - icon color', () => { @@ -190,18 +151,6 @@ describe('getChipColors - icon color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getChipColors({ - disabled: true, - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - iconColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3, flat mode', () => { expect( getChipColors({ @@ -224,20 +173,6 @@ describe('getChipColors - icon color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return custom color, for theme version 3', () => { expect( getChipColors({ @@ -249,18 +184,6 @@ describe('getChipColors - icon color', () => { iconColor: 'purple', }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - iconColor: color('purple').alpha(0.54).rgb().string(), - }); - }); }); describe('getChipColors - ripple color', () => { @@ -303,116 +226,6 @@ describe('getChipColors - ripple color', () => { rippleColor: color('purple').alpha(0.12).rgb().string(), }); }); - - it('should return custom color, for theme version 2', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').fade(0.5).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').lighten(0.4).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, outline mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.08).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode, customBackgroundColor', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('purple').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#ebebeb').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outline mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: true, - }) - ).toMatchObject({ - rippleColor: color(getTheme(true, false).colors.surface) - .lighten(0.2) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - rippleColor: color('#383838').lighten(0.4).rgb().string(), - }); - }); }); describe('getChipColor - selected background color', () => { @@ -505,90 +318,6 @@ describe('getChipColor - selected background color', () => { .string(), }); }); - - it('should return custom color, for theme version 2, light mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.08).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false, false).colors.surface) - .darken(0.08) - .rgb() - .string(), - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(), - }); - }); }); describe('getChipColor - background color', () => { @@ -625,39 +354,6 @@ describe('getChipColor - background color', () => { backgroundColor: getTheme().colors.secondaryContainer, }); }); - - it('should return theme color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.surface, - }); - }); - - it('should return theme color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - backgroundColor: '#ebebeb', - }); - }); - - it('should return theme color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - backgroundColor: '#383838', - }); - }); }); describe('getChipColor - border color', () => { @@ -695,74 +391,6 @@ describe('getChipColor - border color', () => { borderColor: 'transparent', }); }); - - it('should return custom color, for theme version 2, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - selectedColor: 'purple', - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color('purple').alpha(0.29).rgb().string(), - }); - }); - - it('should return custom color, for theme version 2, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - customBackgroundColor: 'purple', - isOutlined: false, - }) - ).toMatchObject({ - borderColor: 'purple', - }); - }); - - it('should return theme color, for theme version 2, light mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - - it('should return theme color, for theme version 2, dark mode, outlined mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: true, - }) - ).toMatchObject({ - borderColor: color(white).alpha(0.29).rgb().string(), - }); - }); - - it('should return theme background color, for theme version 2, light mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(false, false), - isOutlined: false, - }) - ).toMatchObject({ - borderColor: '#ebebeb', - }); - }); - - it('should return theme background color, for theme version 2, dark mode, flat mode', () => { - expect( - getChipColors({ - theme: getTheme(true, false), - isOutlined: false, - }) - ).toMatchObject({ - borderColor: '#383838', - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index d59639efc1..74f636cf5c 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -2,12 +2,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import color from 'color'; import { act } from 'react-test-renderer'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; -import getContrastingColor from '../../utils/getContrastingColor'; import FAB from '../FAB'; import { getFABColors } from '../FAB/utils'; @@ -211,30 +208,6 @@ describe('getFABColors - background color', () => { }); }); - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(black).alpha(0.12).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: color(white).alpha(0.12).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -278,17 +251,6 @@ describe('getFABColors - background color', () => { backgroundColor: getTheme().colors.elevation.level3, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - variant: 'primary', - }) - ).toMatchObject({ - backgroundColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getFABColors - foreground color', () => { @@ -316,30 +278,6 @@ describe('getFABColors - foreground color', () => { }); }); - it('should return correct disabled color, for theme version 2, light mode', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getFABColors({ - theme: getTheme(true, false), - disabled: true, - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3, primary variant', () => { expect( getFABColors({ @@ -383,21 +321,6 @@ describe('getFABColors - foreground color', () => { foregroundColor: getTheme().colors.primary, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFABColors({ - theme: getTheme(false, false), - variant: 'primary', - }) - ).toMatchObject({ - foregroundColor: getContrastingColor( - getTheme(false, false).colors.accent, - white, - 'rgba(0, 0, 0, .54)' - ), - }); - }); }); it('animated value changes correctly', () => { diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 50cc0a7173..3eb51c78d6 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -32,16 +32,6 @@ describe('getFABGroupColors - backdrop color', () => { .string(), }); }); - - it('should return correct backdrop color, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backdropColor: getTheme(false, false).colors.backdrop, - }); - }); }); describe('getFABGroupColors - label color', () => { @@ -54,29 +44,6 @@ describe('getFABGroupColors - label color', () => { labelColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, dark mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - labelColor: getTheme(true, false).colors.text, - }); - }); - - it('should return correct theme color, light mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - labelColor: color(getTheme(false, false).colors.text) - .fade(0.54) - .rgb() - .string(), - }); - }); }); describe('getFABGroupColors - stacked FAB background color', () => { @@ -89,16 +56,6 @@ describe('getFABGroupColors - stacked FAB background color', () => { stackedFABBackgroundColor: getTheme().colors.elevation.level3, }); }); - - it('should return correct theme color, dark mode, for theme version 2', () => { - expect( - getFABGroupColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - stackedFABBackgroundColor: getTheme(false, false).colors.surface, - }); - }); }); describe('FABActions - labelStyle - containerStyle', () => { diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index 381ea5ae24..11f47cb49c 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -190,16 +190,6 @@ describe('getIconButtonColor - icon color', () => { iconColor: getTheme().colors.primary, }); }); - - it('should return theme icon color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: getTheme(false, false).colors.text, - }); - }); }); describe('getIconButtonColor - background color', () => { @@ -316,16 +306,6 @@ describe('getIconButtonColor - border color', () => { borderColor: getTheme().colors.outline, }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - borderColor: undefined, - }); - }); }); describe('getIconButtonColor - ripple color', () => { @@ -341,19 +321,6 @@ describe('getIconButtonColor - ripple color', () => { .string(), }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getIconButtonColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(getTheme(false, false).colors.text) - .alpha(0.32) - .rgb() - .string(), - }); - }); }); it('action animated value changes correctly', () => { diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index 0c24538348..9695b3c186 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -115,31 +115,6 @@ describe('ListAccordion', () => { }); }); -describe('getAccordionColors - title color', () => { - it('should return theme color, for theme version 3', () => { - expect( - getAccordionColors({ - theme: getTheme(), - }) - ).toMatchObject({ - titleColor: getTheme().colors.onSurface, - }); - }); - - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); -}); - describe('getAccordionColors - description color', () => { it('should return theme color, for theme version 3', () => { expect( @@ -150,19 +125,6 @@ describe('getAccordionColors - description color', () => { descriptionColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - descriptionColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getAccordionColors - title text color', () => { @@ -176,19 +138,6 @@ describe('getAccordionColors - title text color', () => { }); }); - it('should return theme color, for theme version 2', () => { - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleTextColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); - it('should return primary color if it is expanded', () => { expect( getAccordionColors({ @@ -215,21 +164,6 @@ describe('getAccordionColors - ripple color', () => { }); }); - it('should return theme color, for theme version 2', () => { - const v2TextColor = color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(); - - expect( - getAccordionColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: color(v2TextColor).alpha(0.12).rgb().string(), - }); - }); - it('should return primary color if it is expanded', () => { expect( getAccordionColors({ diff --git a/src/components/__tests__/ListUtils.test.tsx b/src/components/__tests__/ListUtils.test.tsx index 4aeefb6ca9..a9889834d8 100644 --- a/src/components/__tests__/ListUtils.test.tsx +++ b/src/components/__tests__/ListUtils.test.tsx @@ -5,18 +5,11 @@ import { getLeftStyles, getRightStyles } from '../List/utils'; import Text from '../Typography/Text'; const styles = StyleSheet.create({ - leftItem: { - marginLeft: 0, - marginRight: 16, - }, leftItemV3: { marginLeft: 16, marginRight: 0, alignSelf: 'center', }, - rightItem: { - marginRight: 0, - }, rightItemV3: { marginLeft: 16, marginRight: 0, @@ -30,23 +23,13 @@ const description = Test; * ********************** getLeftStyles ********************** * */ -it('returns styles for left item without description for V2', () => { - const style = getLeftStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.leftItem, marginVertical: 0 }); -}); - -it('returns styles for left item w/ desctiption for V2', () => { - const style = getLeftStyles(false, description, false); - expect(style).toStrictEqual(styles.leftItem); -}); - -it('returns styles for left item without description for V3', () => { - const style = getLeftStyles(false, null, true); +it('returns styles for left item without description', () => { + const style = getLeftStyles(false, null); expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 }); }); -it('returns styles for left item w/ desctiption for V3', () => { - const style = getLeftStyles(true, description, true); +it('returns styles for left item w/ desctiption', () => { + const style = getLeftStyles(true, description); expect(style).toStrictEqual({ ...styles.leftItemV3, alignSelf: 'flex-start', @@ -57,23 +40,13 @@ it('returns styles for left item w/ desctiption for V3', () => { * ********************** getRightStyles ********************** * */ -it('returns styles for right item without description for V2', () => { - const style = getRightStyles(false, null, false); - expect(style).toStrictEqual({ ...styles.rightItem, marginVertical: 0 }); -}); - -it('returns styles for right item w/ desctiption for V2', () => { - const style = getRightStyles(false, description, false); - expect(style).toStrictEqual(styles.rightItem); -}); - -it('returns styles for right item without description for V3', () => { - const style = getRightStyles(false, null, true); +it('returns styles for right item without description', () => { + const style = getRightStyles(false, null); expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 }); }); -it('returns styles for right item w/ desctiption for V3', () => { - const style = getRightStyles(true, description, true); +it('returns styles for right item w/ desctiption', () => { + const style = getRightStyles(true, description); expect(style).toStrictEqual({ ...styles.rightItemV3, alignSelf: 'flex-start', diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index 29397d1262..21ed4d0802 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -70,7 +70,7 @@ it('renders menu with content styles', () => { ([0, 1, 2, 3, 4, 5] as MD3Elevation[]).forEach((elevation) => it(`renders menu with background color based on elevation value = ${elevation}`, () => { - const theme = getTheme(false, true); + const theme = getTheme(); const { getByTestId } = render( diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 7413f43622..d482800582 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -4,7 +4,6 @@ import { render } from '@testing-library/react-native'; import color from 'color'; import { getTheme } from '../../core/theming'; -import { black, white } from '../../styles/themes/v2/colors'; import Menu from '../Menu/Menu'; import { getMenuItemColor } from '../Menu/utils'; @@ -75,28 +74,6 @@ describe('getMenuItemColor - title color', () => { ).toMatchObject({ titleColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - titleColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -106,19 +83,6 @@ describe('getMenuItemColor - title color', () => { titleColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - titleColor: color(getTheme(false, false).colors.text) - .alpha(0.87) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - icon color', () => { @@ -131,28 +95,6 @@ describe('getMenuItemColor - icon color', () => { ).toMatchObject({ iconColor: getTheme().colors.onSurfaceDisabled }); }); - it('should return disabled color if disabled, for theme version 2, light theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(black).alpha(0.32).rgb().string(), - }); - }); - - it('should return disabled color if disabled, for theme version 2, dark theme', () => { - expect( - getMenuItemColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - iconColor: color(white).alpha(0.32).rgb().string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getMenuItemColor({ @@ -162,19 +104,6 @@ describe('getMenuItemColor - icon color', () => { iconColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - iconColor: color(getTheme(false, false).colors.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); }); describe('getMenuItemColor - ripple color', () => { @@ -190,14 +119,4 @@ describe('getMenuItemColor - ripple color', () => { .string(), }); }); - - it('should return undefined, for theme version 2', () => { - expect( - getMenuItemColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - rippleColor: undefined, - }); - }); }); diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index dfbe5fa131..e74650efd2 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -161,7 +161,6 @@ exports[`can render leading radio button control 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "right", @@ -256,7 +255,6 @@ exports[`can render the Android radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -408,7 +406,6 @@ exports[`can render the iOS radio button on different platforms 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", @@ -586,7 +583,6 @@ exports[`renders unchecked 1`] = ` "flexGrow": 1, "flexShrink": 1, }, - false, { "color": "rgba(28, 27, 31, 1)", "textAlign": "left", diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx index d36babb5bb..e65f9015f7 100644 --- a/src/components/__tests__/SegmentedButton.test.tsx +++ b/src/components/__tests__/SegmentedButton.test.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react-native'; -import color from 'color'; import { getTheme } from '../../core/theming'; -import { black } from '../../styles/themes/v2/colors'; import SegmentedButtons from '../SegmentedButtons/SegmentedButtons'; import { getDisabledSegmentedButtonStyle, @@ -56,22 +54,16 @@ it('renders checked segmented button with selected check', async () => { describe('getSegmentedButtonColors', () => { it.each` - theme | disabled | checked | checkedColor | uncheckedColor | expected - ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} - ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} - ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} - ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} - ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} - ${getTheme(false, false)} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme(false, false).colors.disabled} - ${getTheme(false, false)} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme(false, false).colors.primary} - ${getTheme(false, false)} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme(false, false).colors.primary} + theme | disabled | checked | checkedColor | uncheckedColor | expected + ${getTheme()} | ${false} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSecondaryContainer} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${true} | ${true} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${true} | ${false} | ${undefined} | ${undefined} | ${getTheme().colors.onSurfaceDisabled} + ${getTheme()} | ${false} | ${true} | ${'a125f5'} | ${undefined} | ${'a125f5'} + ${getTheme()} | ${false} | ${false} | ${undefined} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${'000'} | ${'000'} + ${getTheme()} | ${false} | ${false} | ${'a125f5'} | ${undefined} | ${getTheme().colors.onSurface} + ${getTheme()} | ${false} | ${true} | ${undefined} | ${'000'} | ${getTheme().colors.onSecondaryContainer} `( 'returns $expected when disabled: $disabled, checked: $checked, checkedColor is $checkedColor and uncheckedColor is $uncheckedColor and isV3: $theme.isV3', ({ theme, disabled, checked, checkedColor, uncheckedColor, expected }) => { @@ -97,25 +89,10 @@ describe('getSegmentedButtonColors', () => { ).toMatchObject({ backgroundColor: getTheme().colors.secondaryContainer }); }); - it('should return correct background color when checked and theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: true, - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors.primary) - .alpha(0.12) - .rgb() - .string(), - }); - }); - it('should return correct background color when uncheked (V3 & V2)', () => { expect( getSegmentedButtonColors({ - theme: getTheme(false, false), + theme: getTheme(), disabled: false, checked: false, }) @@ -136,18 +113,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct border color with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - borderColor: color(black).alpha(0.29).rgb().string(), - }); - }); - it('should return correct border color when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -172,18 +137,6 @@ describe('getSegmentedButtonColors', () => { }); }); - it('should return correct textColor with theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: false, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.primary, - }); - }); - it('should return correct textColor when disabled and theme version 3', () => { expect( getSegmentedButtonColors({ @@ -195,18 +148,6 @@ describe('getSegmentedButtonColors', () => { textColor: getTheme().colors.onSurfaceDisabled, }); }); - - it('should return correct textColor when disabled and theme version 2', () => { - expect( - getSegmentedButtonColors({ - theme: getTheme(false, false), - disabled: true, - checked: false, - }) - ).toMatchObject({ - textColor: getTheme(false, false).colors.disabled, - }); - }); }); describe('getDisabledSegmentedButtonBorderWidth', () => { diff --git a/src/components/__tests__/Switch.test.tsx b/src/components/__tests__/Switch.test.tsx index e475b9a166..dfaa028b43 100644 --- a/src/components/__tests__/Switch.test.tsx +++ b/src/components/__tests__/Switch.test.tsx @@ -62,16 +62,6 @@ describe('getSwitchColor - checked color', () => { checkedColor: getTheme().colors.primary, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - checkedColor: getTheme(false, false).colors.accent, - }); - }); }); describe('getSwitchColor - thumb tint color', () => { @@ -163,24 +153,12 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return checked color for iOS platform, for theme version 2', () => { - Platform.OS = 'ios'; - - expect( - getSwitchColor({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - onTintColor: getTheme(false, false).colors.accent, - }); - }); - it('should return custom color for iOS platform', () => { Platform.OS = 'ios'; expect( getSwitchColor({ - theme: getTheme(false, false), + theme: getTheme(), color: 'purple', }) ).toMatchObject({ @@ -201,17 +179,6 @@ describe('getSwitchColor - on tint color', () => { }); }); - it('should return correct disabled color, for theme version 2, dark mode', () => { - expect( - getSwitchColor({ - theme: getTheme(true, false), - disabled: true, - }) - ).toMatchObject({ - onTintColor: color(white).alpha(0.1).rgb().string(), - }); - }); - it('should return correct disabled color, light mode', () => { expect( getSwitchColor({ diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index e190a537d6..c92ed138c4 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -551,17 +551,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: 'transparent', - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -572,16 +561,6 @@ describe('getFlatInputColor - underline color', () => { }); }); - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - underlineColorCustom: getTheme(false, false).colors.disabled, - }); - }); - it('should return custom color, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -595,7 +574,7 @@ describe('getFlatInputColor - underline color', () => { expect( getFlatInputColors({ underlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(), }) ).toMatchObject({ underlineColorCustom: 'beige', @@ -617,7 +596,7 @@ describe('getFlatInputColor - input text color', () => { expect( getOutlinedInputColors({ textColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(), }) ).toMatchObject({ inputTextColor: 'beige', @@ -635,20 +614,6 @@ describe('getFlatInputColor - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -658,16 +623,6 @@ describe('getFlatInputColor - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getFlatInputColor - placeholder color', () => { @@ -682,17 +637,6 @@ describe('getFlatInputColor - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -702,16 +646,6 @@ describe('getFlatInputColor - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getFlatInputColor - background color', () => { @@ -740,17 +674,6 @@ describe('getFlatInputColor - background color', () => { }); }); - it('should return undefined when disabled, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: undefined, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getFlatInputColors({ @@ -760,32 +683,6 @@ describe('getFlatInputColor - background color', () => { backgroundColor: getTheme().colors.surfaceVariant, }); }); - - it('should return correct theme color, for theme version 2, light mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(false, false).colors?.background) - .darken(0.06) - .rgb() - .string(), - }); - }); - - it('should return correct theme color, for theme version 2, dark mode', () => { - expect( - getFlatInputColors({ - theme: getTheme(true, false), - }) - ).toMatchObject({ - backgroundColor: color(getTheme(true, false).colors?.background) - .lighten(0.24) - .rgb() - .string(), - }); - }); }); describe('getFlatInputColor - error color', () => { @@ -802,10 +699,10 @@ describe('getFlatInputColor - error color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme().colors.error, }); }); }); @@ -822,20 +719,6 @@ describe('getFlatInputColor - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getFlatInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getFlatInputColors({ @@ -849,10 +732,10 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme().colors.error, }); }); @@ -869,7 +752,7 @@ describe('getFlatInputColor - active color', () => { expect( getFlatInputColors({ activeUnderlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(), }) ).toMatchObject({ activeColor: 'beige', @@ -885,16 +768,6 @@ describe('getFlatInputColor - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getFlatInputColors({ - theme: getTheme(false, true), - }) - ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, - }); - }); }); describe('getOutlinedInputColors - outline color', () => { @@ -920,29 +793,6 @@ describe('getOutlinedInputColors - outline color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.disabled, - }); - }); - - it('should return custom color as disabled, when it is transparent, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - customOutlineColor: 'transparent', - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: 'transparent', - }); - }); - it('should return custom color, if not disabled, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -956,7 +806,7 @@ describe('getOutlinedInputColors - outline color', () => { expect( getOutlinedInputColors({ customOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(), }) ).toMatchObject({ outlineColor: 'beige', @@ -972,16 +822,6 @@ describe('getOutlinedInputColors - outline color', () => { outlineColor: getTheme().colors.outline, }); }); - - it('should return theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - outlineColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - input text color', () => { @@ -996,20 +836,6 @@ describe('getOutlinedInputColors - input text color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1019,16 +845,6 @@ describe('getOutlinedInputColors - input text color', () => { inputTextColor: getTheme().colors.onSurface, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - inputTextColor: getTheme(false, false).colors.text, - }); - }); }); describe('getOutlinedInputColors - placeholder color', () => { @@ -1043,17 +859,6 @@ describe('getOutlinedInputColors - placeholder color', () => { }); }); - it('should return correct disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.disabled, - }); - }); - it('should return correct theme color, for theme version 3', () => { expect( getOutlinedInputColors({ @@ -1063,16 +868,6 @@ describe('getOutlinedInputColors - placeholder color', () => { placeholderColor: getTheme().colors.onSurfaceVariant, }); }); - - it('should return correct theme color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, false), - }) - ).toMatchObject({ - placeholderColor: getTheme(false, false).colors.placeholder, - }); - }); }); describe('getOutlinedInputColors - error color', () => { @@ -1089,10 +884,10 @@ describe('getOutlinedInputColors - error color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - errorColor: getTheme(false, true).colors.error, + errorColor: getTheme().colors.error, }); }); }); @@ -1109,20 +904,6 @@ describe('getOutlinedInputColors - active color', () => { }); }); - it('should return disabled color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - disabled: true, - theme: getTheme(false, false), - }) - ).toMatchObject({ - activeColor: color(getTheme(false, false).colors?.text) - .alpha(0.54) - .rgb() - .string(), - }); - }); - it('should return correct active color, if error, no matter what the theme is', () => { expect( getOutlinedInputColors({ @@ -1136,10 +917,10 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ error: true, - theme: getTheme(false, true), + theme: getTheme(), }) ).toMatchObject({ - activeColor: getTheme(false, true).colors.error, + activeColor: getTheme().colors.error, }); }); @@ -1156,7 +937,7 @@ describe('getOutlinedInputColors - active color', () => { expect( getOutlinedInputColors({ activeOutlineColor: 'beige', - theme: getTheme(false, false), + theme: getTheme(), }) ).toMatchObject({ activeColor: 'beige', @@ -1172,16 +953,6 @@ describe('getOutlinedInputColors - active color', () => { activeColor: getTheme().colors.primary, }); }); - - it('should return theme active color, for theme version 2', () => { - expect( - getOutlinedInputColors({ - theme: getTheme(false, true), - }) - ).toMatchObject({ - activeColor: getTheme(false, true).colors.primary, - }); - }); }); describe('outlineStyle - underlineStyle', () => { diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 3ab234d0f3..a0e2bbafcb 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -68,18 +68,6 @@ describe('getToggleButtonColor', () => { ); }); - it('should return correct color when checked and theme version 2', () => { - expect( - getToggleButtonColor({ theme: getTheme(false, false), checked: true }) - ).toBe('rgba(0, 0, 0, .08)'); - }); - - it('should return correct color when checked and theme version 2, dark theme', () => { - expect( - getToggleButtonColor({ theme: getTheme(true, false), checked: true }) - ).toBe('rgba(255, 255, 255, .12)'); - }); - it('should return transparent color when not checked', () => { expect(getToggleButtonColor({ theme: getTheme(), checked: false })).toBe( 'transparent' diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index b1aaff7ab0..175383e4ad 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -82,21 +82,25 @@ exports[`render visible banner, with custom theme 1`] = ` }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "#00f", + }, + ], ], ] } @@ -234,7 +238,6 @@ exports[`render visible banner, with custom theme 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -364,21 +367,25 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + ], ], ] } @@ -505,21 +512,25 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + ], ], ] } @@ -657,7 +668,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -775,21 +785,25 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + ], ], ] } @@ -927,7 +941,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1077,7 +1090,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1217,21 +1229,25 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + ], ], ] } @@ -1336,21 +1352,25 @@ exports[`renders visible banner, without action buttons and without image 1`] = }, { "color": "rgba(28, 27, 31, 1)", - "fontFamily": "System", - "fontWeight": "400", - "letterSpacing": 0, - }, - { "writingDirection": "ltr", }, [ { - "flex": 1, - "margin": 8, - }, - { - "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "400", + "letterSpacing": 0.25, + "lineHeight": 20, }, + [ + { + "flex": 1, + "margin": 8, + }, + { + "color": "rgba(28, 27, 31, 1)", + }, + ], ], ] } diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index db8e187690..d5f335c3f1 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -122,7 +122,6 @@ exports[`renders button with an accessibility hint 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -273,7 +272,6 @@ exports[`renders button with an accessibility label 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -423,7 +421,6 @@ exports[`renders button with button color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -573,7 +570,6 @@ exports[`renders button with color 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -723,7 +719,6 @@ exports[`renders button with custom testID 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -922,7 +917,6 @@ exports[`renders button with icon 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1123,7 +1117,6 @@ exports[`renders button with icon in reverse order 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1273,7 +1266,6 @@ exports[`renders contained contained with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1424,7 +1416,6 @@ exports[`renders disabled button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -1782,7 +1773,6 @@ exports[`renders loading button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 16, }, @@ -1932,7 +1922,6 @@ exports[`renders outlined button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -2083,7 +2072,6 @@ exports[`renders text button by default 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, @@ -2233,7 +2221,6 @@ exports[`renders text button with mode 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index a6ffbfcb06..59e80d0aef 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -1801,7 +1801,6 @@ exports[`DataTable.Pagination renders data table pagination with options select "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap index 78e3ed8612..e3d5e8ca8b 100644 --- a/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DrawerItem.test.tsx.snap @@ -43,10 +43,6 @@ exports[`renders DrawerItem with icon 1`] = ` "marginHorizontal": 10, "marginVertical": 4, }, - { - "backgroundColor": undefined, - "borderRadius": 28, - }, { "height": 56, "justifyContent": "center", @@ -54,6 +50,10 @@ exports[`renders DrawerItem with icon 1`] = ` "marginRight": 12, "marginVertical": 0, }, + { + "backgroundColor": undefined, + "borderRadius": 28, + }, undefined, ], ] @@ -202,10 +202,6 @@ exports[`renders active DrawerItem 1`] = ` "marginHorizontal": 10, "marginVertical": 4, }, - { - "backgroundColor": "rgba(232, 222, 248, 1)", - "borderRadius": 28, - }, { "height": 56, "justifyContent": "center", @@ -213,6 +209,10 @@ exports[`renders active DrawerItem 1`] = ` "marginRight": 12, "marginVertical": 0, }, + { + "backgroundColor": "rgba(232, 222, 248, 1)", + "borderRadius": 28, + }, undefined, ], ] @@ -361,10 +361,6 @@ exports[`renders basic DrawerItem 1`] = ` "marginHorizontal": 10, "marginVertical": 4, }, - { - "backgroundColor": undefined, - "borderRadius": 28, - }, { "height": 56, "justifyContent": "center", @@ -372,6 +368,10 @@ exports[`renders basic DrawerItem 1`] = ` "marginRight": 12, "marginVertical": 0, }, + { + "backgroundColor": undefined, + "borderRadius": 28, + }, undefined, ], ] diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index fc3ac61473..f2a20c8047 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -134,7 +134,6 @@ exports[`renders menu with content styles 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -371,7 +370,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -408,7 +406,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -494,7 +491,6 @@ exports[`renders menu with content styles 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -531,7 +527,6 @@ exports[`renders menu with content styles 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -693,7 +688,6 @@ exports[`renders not visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -859,7 +853,6 @@ exports[`renders visible menu 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 24, "marginVertical": 10, @@ -1092,7 +1085,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1129,7 +1121,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -1215,7 +1206,6 @@ exports[`renders visible menu 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -1252,7 +1242,6 @@ exports[`renders visible menu 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index e16c6134f4..a34067f576 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -67,7 +67,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -108,7 +107,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -145,7 +143,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -231,7 +228,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -272,7 +268,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -309,7 +304,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", @@ -395,7 +389,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -436,7 +429,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -473,7 +465,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 0.38)", "fontFamily": "System", @@ -559,7 +550,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="box-none" style={ [ - false, { "width": 24, }, @@ -600,7 +590,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -637,7 +626,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 0.38)", "fontFamily": "System", @@ -723,7 +711,6 @@ exports[`Menu Item renders menu item 1`] = ` pointerEvents="none" style={ [ - false, { "justifyContent": "center", }, @@ -760,7 +747,6 @@ exports[`Menu Item renders menu item 1`] = ` "lineHeight": 24, }, [ - false, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 9fdd75d4dc..b859166348 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -440,7 +440,6 @@ exports[`renders snackbar with action button 1`] = ` "marginVertical": 9, "textAlign": "center", }, - false, { "marginHorizontal": 12, }, diff --git a/src/core/PaperProvider.tsx b/src/core/PaperProvider.tsx index 44fd426ab5..04bc547d34 100644 --- a/src/core/PaperProvider.tsx +++ b/src/core/PaperProvider.tsx @@ -8,7 +8,7 @@ import { import SafeAreaProviderCompat from './SafeAreaProviderCompat'; import { Provider as SettingsProvider, Settings } from './settings'; -import { defaultThemesByVersion, ThemeProvider } from './theming'; +import { defaultThemes, ThemeProvider } from './theming'; import MaterialCommunityIcon from '../components/MaterialCommunityIcon'; import PortalHost from '../components/Portal/PortalHost'; import type { ThemeProp } from '../types'; @@ -21,12 +21,8 @@ export type Props = { }; const PaperProvider = (props: Props) => { - const isOnlyVersionInTheme = - props.theme && Object.keys(props.theme).length === 1 && props.theme.version; - const colorSchemeName = - ((!props.theme || isOnlyVersionInTheme) && Appearance?.getColorScheme()) || - 'light'; + (!props.theme && Appearance?.getColorScheme()) || 'light'; const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false); @@ -59,13 +55,13 @@ const PaperProvider = (props: Props) => { React.useEffect(() => { let appearanceSubscription: NativeEventSubscription | undefined; - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { appearanceSubscription = Appearance?.addChangeListener( handleAppearanceChange ) as NativeEventSubscription | undefined; } return () => { - if (!props.theme || isOnlyVersionInTheme) { + if (!props.theme) { if (appearanceSubscription) { appearanceSubscription.remove(); } else { @@ -74,17 +70,16 @@ const PaperProvider = (props: Props) => { } } }; - }, [props.theme, isOnlyVersionInTheme]); + }, [props.theme]); const theme = React.useMemo(() => { - const themeVersion = props.theme?.version || 3; const scheme = colorScheme === 'dark' ? 'dark' : 'light'; - const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme]; + const defaultThemeBase = defaultThemes[scheme]; const extendedThemeBase = { ...defaultThemeBase, ...props.theme, - version: themeVersion, + version: 3 as const, animation: { ...props.theme?.animation, scale: reduceMotionEnabled ? 0 : 1, @@ -93,7 +88,7 @@ const PaperProvider = (props: Props) => { return { ...extendedThemeBase, - isV3: extendedThemeBase.version === 3, + isV3: true as const, }; }, [colorScheme, props.theme, reduceMotionEnabled]); diff --git a/src/core/__tests__/PaperProvider.test.tsx b/src/core/__tests__/PaperProvider.test.tsx index 11c4beff49..28843d4ba7 100644 --- a/src/core/__tests__/PaperProvider.test.tsx +++ b/src/core/__tests__/PaperProvider.test.tsx @@ -8,12 +8,7 @@ import { import { render, act } from '@testing-library/react-native'; -import { - MD2LightTheme, - MD2DarkTheme, - MD3LightTheme, - MD3DarkTheme, -} from '../../styles/themes'; +import { MD3LightTheme, MD3DarkTheme } from '../../styles/themes'; import type { ThemeProp } from '../../types'; import PaperProvider from '../PaperProvider'; import { useTheme } from '../theming'; @@ -229,7 +224,6 @@ describe('PaperProvider', () => { colors: { ...ExtendedLightTheme.colors, primary: 'tomato', - accent: 'yellow', }, } as ThemeProp; const { getByTestId } = render(createProvider(customTheme)); @@ -237,23 +231,4 @@ describe('PaperProvider', () => { customTheme ); }); - - it.each` - version | colorScheme | expectedTheme - ${2} | ${'light'} | ${MD2LightTheme} - ${2} | ${'dark'} | ${MD2DarkTheme} - ${3} | ${'light'} | ${MD3LightTheme} - ${3} | ${'dark'} | ${MD3DarkTheme} - `( - 'uses correct theme, $colorScheme mode, version $version', - async ({ version, colorScheme, expectedTheme }) => { - mockAppearance(); - (Appearance.getColorScheme as jest.Mock).mockReturnValue(colorScheme); - const { getByTestId } = render(createProvider({ version })); - - expect(getByTestId('provider-child-view').props.theme).toStrictEqual( - expectedTheme - ); - } - ); }); diff --git a/src/core/theming.tsx b/src/core/theming.tsx index 44223f032a..042a83d960 100644 --- a/src/core/theming.tsx +++ b/src/core/theming.tsx @@ -3,12 +3,7 @@ import type { ComponentType } from 'react'; import { $DeepPartial, createTheming } from '@callstack/react-theme-provider'; import color from 'color'; -import { - MD2DarkTheme, - MD2LightTheme, - MD3DarkTheme, - MD3LightTheme, -} from '../styles/themes'; +import { MD3DarkTheme, MD3LightTheme } from '../styles/themes'; import type { InternalTheme, MD3Theme, @@ -36,30 +31,17 @@ export const withInternalTheme = ( WrappedComponent: ComponentType & C ) => withTheme(WrappedComponent); -export const defaultThemesByVersion = { - 2: { - light: MD2LightTheme, - dark: MD2DarkTheme, - }, - 3: { - light: MD3LightTheme, - dark: MD3DarkTheme, - }, +export const defaultThemes = { + light: MD3LightTheme, + dark: MD3DarkTheme, }; -export const getTheme = < - Scheme extends boolean = false, - IsVersion3 extends boolean = true ->( - isDark: Scheme = false as Scheme, - isV3: IsVersion3 = true as IsVersion3 -): (typeof defaultThemesByVersion)[IsVersion3 extends true - ? 3 - : 2][Scheme extends true ? 'dark' : 'light'] => { - const themeVersion = isV3 ? 3 : 2; +export const getTheme = ( + isDark: Scheme = false as Scheme +): (typeof defaultThemes)[Scheme extends true ? 'dark' : 'light'] => { const scheme = isDark ? 'dark' : 'light'; - return defaultThemesByVersion[themeVersion][scheme]; + return defaultThemes[scheme]; }; // eslint-disable-next-line no-redeclare diff --git a/src/index.tsx b/src/index.tsx index 1b20528787..7e609b709e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,9 +19,7 @@ export { default as configureFonts } from './styles/fonts'; import * as Avatar from './components/Avatar/Avatar'; import * as Drawer from './components/Drawer/Drawer'; import * as List from './components/List/List'; -import * as MD2Colors from './styles/themes/v2/colors'; -export { MD2Colors }; export { Avatar, List, Drawer }; export * from './components/FAB/AnimatedFAB'; @@ -161,7 +159,6 @@ export type { } from './react-navigation'; export type { - MD2Theme, MD3Theme, ThemeBase, MD3Elevation, diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js index fb8dce5ba5..6deed087a4 100644 --- a/src/styles/__tests__/fonts.test.js +++ b/src/styles/__tests__/fonts.test.js @@ -1,10 +1,3 @@ -const customFont = { - custom: { - fontFamily: 'sans-serif', - fontWeight: 'bold', - }, -}; - const customFontV3 = { displayLarge: { fontFamily: 'NotoSans', @@ -131,18 +124,16 @@ const mockPlatform = (OS) => { const loadFonts = () => { let configureFonts; - let fontConfig; let typescale; jest.isolateModules(() => { const fonts = require('../fonts'); configureFonts = fonts.default; - fontConfig = fonts.fontConfig; typescale = require('../themes/v3/tokens').typescale; }); - return { configureFonts, fontConfig, typescale }; + return { configureFonts, typescale }; }; describe('configureFonts', () => { @@ -150,66 +141,6 @@ describe('configureFonts', () => { jest.dontMock('react-native'); }); - it('adds custom fonts to the iOS config', () => { - mockPlatform('ios'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - ios: { - ...fontConfig.ios, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.ios, - customFont, - }); - }); - - it('adds custom fonts to the Android config', () => { - mockPlatform('android'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - android: { - ...fontConfig.android, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.android, - customFont, - }); - }); - - it('adds custom fonts to the Web config', () => { - mockPlatform('web'); - const { configureFonts, fontConfig } = loadFonts(); - - expect( - configureFonts({ - config: { - web: { - ...fontConfig.web, - customFont, - }, - }, - isV3: false, - }) - ).toEqual({ - ...fontConfig.web, - customFont, - }); - }); - it('overrides properties passed in config for all variants', () => { mockPlatform('ios'); const { configureFonts } = loadFonts(); diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index e3b5017fc4..07a0ab2a2e 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,69 +1,6 @@ -import { Platform, PlatformOSType } from 'react-native'; - -import type { Fonts, MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; +import type { MD3Type, MD3Typescale, MD3TypescaleKey } from '../types'; import { typescale } from './themes/v3/tokens'; -export const fontConfig = { - web: { - regular: { - fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', - fontWeight: '400' as '400', - }, - medium: { - fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', - fontWeight: '500' as '500', - }, - light: { - fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', - fontWeight: '300' as '300', - }, - thin: { - fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', - fontWeight: '100' as '100', - }, - }, - ios: { - regular: { - fontFamily: 'System', - fontWeight: '400' as '400', - }, - medium: { - fontFamily: 'System', - fontWeight: '500' as '500', - }, - light: { - fontFamily: 'System', - fontWeight: '300' as '300', - }, - thin: { - fontFamily: 'System', - fontWeight: '100' as '100', - }, - }, - default: { - regular: { - fontFamily: 'sans-serif', - fontWeight: 'normal' as 'normal', - }, - medium: { - fontFamily: 'sans-serif-medium', - fontWeight: 'normal' as 'normal', - }, - light: { - fontFamily: 'sans-serif-light', - fontWeight: 'normal' as 'normal', - }, - thin: { - fontFamily: 'sans-serif-thin', - fontWeight: 'normal' as 'normal', - }, - }, -}; - -type MD2FontsConfig = { - [platform in PlatformOSType | 'default']?: Fonts; -}; - type MD3FontsConfig = | { [key in MD3TypescaleKey]: Partial; @@ -73,11 +10,6 @@ type MD3FontsConfig = } | Partial; -function configureV2Fonts(config: MD2FontsConfig): Fonts { - const fonts = Platform.select({ ...fontConfig, ...config }) as Fonts; - return fonts; -} - function configureV3Fonts( config: MD3FontsConfig ): MD3Typescale | (MD3Typescale & { [key: string]: MD3Type }) { @@ -110,13 +42,6 @@ function configureV3Fonts( ); } -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { isV3: false }): Fonts; -// eslint-disable-next-line no-redeclare -export default function configureFonts(params: { - config?: MD2FontsConfig; - isV3: false; -}): Fonts; // eslint-disable-next-line no-redeclare export default function configureFonts(params?: { config?: Partial; @@ -134,10 +59,6 @@ export default function configureFonts(params: { }): MD3Typescale & { [key: string]: MD3Type }; // eslint-disable-next-line no-redeclare export default function configureFonts(params?: any) { - const { isV3 = true, config } = params || {}; - - if (isV3) { - return configureV3Fonts(config); - } - return configureV2Fonts(config); + const { config } = params || {}; + return configureV3Fonts(config); } diff --git a/src/styles/overlay.tsx b/src/styles/overlay.tsx index f9e6f8f9a5..050e0c06d1 100644 --- a/src/styles/overlay.tsx +++ b/src/styles/overlay.tsx @@ -2,7 +2,7 @@ import { Animated } from 'react-native'; import color from 'color'; -import { MD2DarkTheme } from './themes/v2/DarkTheme'; +import { MD3DarkTheme } from './themes'; export const isAnimatedValue = ( it: number | string | Animated.AnimatedInterpolation @@ -10,7 +10,7 @@ export const isAnimatedValue = ( export default function overlay( elevation: T, - surfaceColor: string = MD2DarkTheme.colors?.surface + surfaceColor: string = MD3DarkTheme.colors.surface ): T extends number ? string : Animated.AnimatedInterpolation { if (isAnimatedValue(elevation)) { const inputRange = [0, 1, 2, 3, 8, 24]; diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx index dcc11e8b65..57cc3612de 100644 --- a/src/styles/shadow.tsx +++ b/src/styles/shadow.tsx @@ -1,73 +1,12 @@ import { Animated } from 'react-native'; -import * as MD2Colors from './themes/v2/colors'; import { MD3Colors } from './themes/v3/tokens'; -const SHADOW_COLOR = MD2Colors.black; -const SHADOW_OPACITY = 0.24; const MD3_SHADOW_OPACITY = 0.3; const MD3_SHADOW_COLOR = MD3Colors.primary0; -export default function shadow( - elevation: number | Animated.Value = 0, - isV3 = false -) { - return isV3 ? v3Shadow(elevation) : v2Shadow(elevation); -} - -function v2Shadow(elevation: number | Animated.Value = 0) { - if (elevation instanceof Animated.Value) { - const inputRange = [0, 1, 2, 3, 8, 24]; - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: new Animated.Value(0), - height: elevation.interpolate({ - inputRange, - outputRange: [0, 0.5, 0.75, 2, 7, 23], - }), - }, - shadowOpacity: elevation.interpolate({ - inputRange: [0, 1], - outputRange: [0, SHADOW_OPACITY], - extrapolate: 'clamp', - }), - shadowRadius: elevation.interpolate({ - inputRange, - outputRange: [0, 0.75, 1.5, 3, 8, 24], - }), - }; - } else { - if (elevation === 0) { - return {}; - } - - let height, radius; - switch (elevation) { - case 1: - height = 0.5; - radius = 0.75; - break; - case 2: - height = 0.75; - radius = 1.5; - break; - default: - height = elevation - 1; - radius = elevation; - } - - return { - shadowColor: SHADOW_COLOR, - shadowOffset: { - width: 0, - height, - }, - shadowOpacity: SHADOW_OPACITY, - shadowRadius: radius, - }; - } +export default function shadow(elevation: number | Animated.Value = 0) { + return v3Shadow(elevation); } function v3Shadow(elevation: number | Animated.Value = 0) { diff --git a/src/styles/themes/index.ts b/src/styles/themes/index.ts index 3db1a460ad..39bcb6648c 100644 --- a/src/styles/themes/index.ts +++ b/src/styles/themes/index.ts @@ -1,4 +1,2 @@ export { MD3LightTheme } from './v3/LightTheme'; export { MD3DarkTheme } from './v3/DarkTheme'; -export { MD2LightTheme } from './v2/LightTheme'; -export { MD2DarkTheme } from './v2/DarkTheme'; diff --git a/src/styles/themes/v2/DarkTheme.tsx b/src/styles/themes/v2/DarkTheme.tsx deleted file mode 100644 index 9eaa576dcb..0000000000 --- a/src/styles/themes/v2/DarkTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA100, white } from './colors'; -import { MD2LightTheme } from './LightTheme'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2DarkTheme: MD2Theme = { - ...MD2LightTheme, - dark: true, - mode: 'adaptive', - version: 2, - isV3: false, - colors: { - ...MD2LightTheme.colors, - primary: '#BB86FC', - accent: '#03dac6', - background: '#121212', - surface: '#121212', - error: '#CF6679', - onSurface: '#FFFFFF', - text: white, - disabled: color(white).alpha(0.38).rgb().string(), - placeholder: color(white).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA100, - tooltip: 'rgba(230, 225, 229, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, -}; diff --git a/src/styles/themes/v2/LightTheme.tsx b/src/styles/themes/v2/LightTheme.tsx deleted file mode 100644 index 8566bdcc40..0000000000 --- a/src/styles/themes/v2/LightTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import color from 'color'; - -import { black, pinkA400, white } from './colors'; -import type { Fonts, MD2Theme } from '../../../types'; -import configureFonts from '../../fonts'; - -export const MD2LightTheme: MD2Theme = { - dark: false, - roundness: 4, - version: 2, - isV3: false, - colors: { - primary: '#6200ee', - accent: '#03dac4', - background: '#f6f6f6', - surface: white, - error: '#B00020', - text: black, - onSurface: '#000000', - disabled: color(black).alpha(0.26).rgb().string(), - placeholder: color(black).alpha(0.54).rgb().string(), - backdrop: color(black).alpha(0.5).rgb().string(), - notification: pinkA400, - tooltip: 'rgba(28, 27, 31, 1)', - }, - fonts: configureFonts({ isV3: false }) as Fonts, - animation: { - scale: 1.0, - }, -}; diff --git a/src/types.tsx b/src/types.tsx index 175131cab3..4208fa0d64 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -28,21 +28,6 @@ export type Fonts = { type Mode = 'adaptive' | 'exact'; -export type MD2Colors = { - primary: string; - background: string; - surface: string; - accent: string; - error: string; - text: string; - onSurface: string; - disabled: string; - placeholder: string; - backdrop: string; - notification: string; - tooltip: string; -}; - export type MD3Colors = { primary: string; primaryContainer: string; @@ -132,14 +117,7 @@ export type MD3Theme = ThemeBase & { fonts: MD3Typescale; }; -export type MD2Theme = ThemeBase & { - version: 2; - isV3: false; - colors: MD2Colors; - fonts: Fonts; -}; - -export type InternalTheme = MD2Theme | MD3Theme; +export type InternalTheme = MD3Theme; // MD3 types export enum MD3TypescaleKey {