refactor: remove MD2 theme related code

Author: lukewalczak

.gitignore

@@ -71,4 +71,6 @@ lib/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+example/ios/*

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() {
               </TouchableRipple>
             )}
 
-            <TouchableRipple onPress={toggleThemeVersion}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">MD 2</Text>
-                <View pointerEvents="none">
-                  <Switch value={!isV3} />
-                </View>
-              </View>
-            </TouchableRipple>
-
             {isV3 && (
               <TouchableRipple onPress={toggleCollapsed}>
                 <View style={[styles.preference, isV3 && styles.v3Preference]}>

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,7 @@ 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 [_, setThemeVersion] = React.useState<2 | 3>(3);
   const [rtl, setRtl] = React.useState<boolean>(
     I18nManager.getConstants().isRTL
   );
@@ -59,18 +53,14 @@ 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;
     }
 
     return isDarkMode
       ? { ...MD3DarkTheme, colors: mdTheme.dark }
       : { ...MD3LightTheme, colors: mdTheme.light };
-  }, [isDarkMode, mdTheme, shouldUseDeviceColors, themeVersion]);
+  }, [isDarkMode, mdTheme, shouldUseDeviceColors]);
 
   React.useEffect(() => {
     const restoreState = async () => {

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 [_, 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]);
+  }, [isDarkMode]);
 
   React.useEffect(() => {
     const restoreState = async () => {

src/components/Badge.tsx

@@ -88,7 +88,8 @@ const Badge = ({
   const {
     backgroundColor = theme.isV3
       ? theme.colors.error
-      : theme.colors?.notification,
+      : // @ts-expect-error TODO: Remove it
+        theme.colors?.notification,
     ...restStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
 
@@ -109,7 +110,6 @@ const Badge = ({
           backgroundColor,
           color: textColor,
           fontSize: size * 0.5,
-          ...(!theme.isV3 && theme.fonts.regular),
           lineHeight: size / fontScale,
           height: size,
           minWidth: size,

src/components/Surface.tsx

@@ -10,7 +10,7 @@ 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 { forwardRef } from '../utils/forwardRef';
@@ -53,30 +53,6 @@ export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
   ref?: React.RefObject<View>;
 };
 
-const MD2Surface = forwardRef<View, Props>(
-  ({ style, theme: overrideTheme, ...rest }: Omit<Props, 'elevation'>, ref) => {
-    const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-    const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme);
-
-    return (
-      <Animated.View
-        ref={ref}
-        {...rest}
-        style={[
-          {
-            backgroundColor:
-              isDarkTheme && mode === 'adaptive'
-                ? overlay(elevation, colors?.surface)
-                : colors?.surface,
-          },
-          elevation ? shadow(elevation) : null,
-          style,
-        ]}
-      />
-    );
-  }
-);
-
 const outerLayerStyleProperties: (keyof ViewStyle)[] = [
   'position',
   'alignSelf',
@@ -269,13 +245,6 @@ const Surface = forwardRef<View, Props>(
   ) => {
     const theme = useInternalTheme(overridenTheme);
 
-    if (!theme.isV3)
-      return (
-        <MD2Surface {...props} theme={theme} style={style} ref={ref}>
-          {children}
-        </MD2Surface>
-      );
-
     const { colors } = theme;
 
     const inputRange = [0, 1, 2, 3, 4, 5];

src/core/PaperProvider.tsx

@@ -77,14 +77,12 @@ const PaperProvider = (props: Props) => {
   }, [props.theme, isOnlyVersionInTheme]);
 
   const theme = React.useMemo(() => {
-    const themeVersion = props.theme?.version || 3;
     const scheme = colorScheme || 'light';
-    const defaultThemeBase = defaultThemesByVersion[themeVersion][scheme];
+    const defaultThemeBase = defaultThemesByVersion[scheme];
 
     const extendedThemeBase = {
       ...defaultThemeBase,
       ...props.theme,
-      version: themeVersion,
       animation: {
         ...props.theme?.animation,
         scale: reduceMotionEnabled ? 0 : 1,
@@ -93,7 +91,8 @@ const PaperProvider = (props: Props) => {
 
     return {
       ...extendedThemeBase,
-      isV3: extendedThemeBase.version === 3,
+      // TODO: Remove it completely
+      isV3: true,
     };
   }, [colorScheme, props.theme, reduceMotionEnabled]);
 

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,
@@ -37,29 +32,16 @@ export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
 ) => withTheme<Props, C>(WrappedComponent);
 
 export const defaultThemesByVersion = {
-  2: {
-    light: MD2LightTheme,
-    dark: MD2DarkTheme,
-  },
-  3: {
-    light: MD3LightTheme,
-    dark: MD3DarkTheme,
-  },
+  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 = <Scheme extends boolean = false>(
+  isDark: Scheme = false as Scheme
+): (typeof defaultThemesByVersion)[Scheme extends true ? 'dark' : 'light'] => {
   const scheme = isDark ? 'dark' : 'light';
 
-  return defaultThemesByVersion[themeVersion][scheme];
+  return defaultThemesByVersion[scheme];
 };
 
 // eslint-disable-next-line no-redeclare

src/index.tsx

@@ -13,15 +13,12 @@ export * from './styles/themes';
 export { default as Provider } from './core/PaperProvider';
 export { default as PaperProvider } from './core/PaperProvider';
 export { default as shadow } from './styles/shadow';
-export { default as overlay } from './styles/overlay';
 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 +158,6 @@ export type {
 } from './react-navigation';
 
 export type {
-  MD2Theme,
   MD3Theme,
   ThemeBase,
   MD3Elevation,