refactor: remove v2 colors

Author: lukewalczak

src/components/Appbar/utils.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, Animated } from 'react-native';
 
-import { white } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import type { InternalTheme, ThemeProp } from '../../types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
@@ -49,7 +49,7 @@ export const getAppbarColor = ({
   }
 
   if (isDark) {
-    return white;
+    return MD3Colors.primary100;
   }
 
   return undefined;

src/components/Avatar/AvatarIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import type { ThemeProp } from '../../types';
 import getContrastingColor from '../../utils/getContrastingColor';
 import Icon, { IconSource } from '../Icon';
@@ -56,7 +56,11 @@ const Avatar = ({
     StyleSheet.flatten(style) || {};
   const textColor =
     rest.color ??
-    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
+    getContrastingColor(
+      backgroundColor,
+      MD3Colors.primary100,
+      'rgba(0, 0, 0, .54)'
+    );
 
   return (
     <View

src/components/Avatar/AvatarText.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import type { ThemeProp } from '../../types';
 import getContrastingColor from '../../utils/getContrastingColor';
 import Text from '../Typography/Text';
@@ -77,7 +77,11 @@ const AvatarText = ({
     StyleSheet.flatten(style) || {};
   const textColor =
     customColor ??
-    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
+    getContrastingColor(
+      backgroundColor,
+      MD3Colors.primary100,
+      'rgba(0, 0, 0, .54)'
+    );
   const { fontScale } = useWindowDimensions();
 
   return (

src/components/Button/utils.tsx

@@ -2,7 +2,7 @@ import { type ViewStyle } from 'react-native';
 
 import color from 'color';
 
-import { black, white } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import type { InternalTheme } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 
@@ -109,7 +109,9 @@ const getButtonTextColor = ({
       isMode('contained-tonal') ||
       isMode('elevated')
     ) {
-      return isDark({ dark, backgroundColor }) ? white : black;
+      return isDark({ dark, backgroundColor })
+        ? MD3Colors.primary100
+        : MD3Colors.primary0;
     }
   }
 

src/components/Card/CardCover.tsx

@@ -3,7 +3,6 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { getCardCoverStyle } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { grey200 } from '../../styles/themes/v2/colors';
 import type { ThemeProp } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 
@@ -79,7 +78,6 @@ CardCover.displayName = 'Card.Cover';
 const styles = StyleSheet.create({
   container: {
     height: 195,
-    backgroundColor: grey200,
     overflow: 'hidden',
   },
   image: {

src/components/Chip/Chip.tsx

@@ -18,7 +18,7 @@ import useLatestCallback from 'use-latest-callback';
 
 import { ChipAvatarProps, getChipColors } from './helpers';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import type { $Omit, EllipsizeProp, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import type { IconSource } from '../Icon';
@@ -360,14 +360,20 @@ const Chip = ({
               {icon ? (
                 <Icon
                   source={icon}
-                  color={avatar ? white : !disabled ? primary : iconColor}
+                  color={
+                    avatar
+                      ? MD3Colors.primary100
+                      : !disabled
+                      ? primary
+                      : iconColor
+                  }
                   size={18}
                   theme={theme}
                 />
               ) : (
                 <MaterialCommunityIcon
                   name="check"
-                  color={avatar ? white : iconColor}
+                  color={avatar ? MD3Colors.primary100 : iconColor}
                   size={18}
                   direction="ltr"
                 />

src/components/MaterialCommunityIcon.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { ComponentProps } from 'react';
 import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native';
 
-import { black } from '../styles/themes/v2/colors';
-
 export type IconProps = {
   name: ComponentProps<typeof MaterialCommunityIcons>['name'];
   color?: string;
@@ -97,7 +95,7 @@ const MaterialCommunityIcons: IconModuleType = IconModule || FallbackIcon;
  */
 const DefaultIcon = ({
   name,
-  color = black,
+  color = 'black',
   size,
   direction,
   allowFontScaling,

src/components/Switch/utils.ts

@@ -2,16 +2,16 @@ import { Platform } from 'react-native';
 
 import setColor from 'color';
 
-import {
-  grey400,
-  grey800,
-  grey50,
-  grey700,
-  white,
-  black,
-} from '../../styles/themes/v2/colors';
 import type { InternalTheme } from '../../types';
 
+export const black = '#000000';
+export const white = '#ffffff';
+export const grey50 = '#fafafa';
+export const grey200 = '#eeeeee';
+export const grey400 = '#bdbdbd';
+export const grey700 = '#616161';
+export const grey800 = '#424242';
+
 type BaseProps = {
   theme: InternalTheme;
   disabled?: boolean;

src/components/__tests__/Avatar.test.tsx

@@ -3,12 +3,12 @@ import { StyleSheet } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import * as Avatar from '../Avatar/Avatar';
 
 const styles = StyleSheet.create({
   bgColor: {
-    backgroundColor: red500,
+    backgroundColor: MD3Colors.error50,
   },
 });
 

src/components/__tests__/Badge.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { render } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/v2/colors';
+import { MD3Colors } from '../../styles/themes/v3/tokens';
 import Badge from '../Badge';
 
 it('renders badge', () => {
@@ -35,7 +35,7 @@ it('renders badge as hidden', () => {
 
 it('renders badge in different color', () => {
   const tree = render(
-    <Badge style={{ backgroundColor: red500 }}>3</Badge>
+    <Badge style={{ backgroundColor: MD3Colors.error50 }}>3</Badge>
   ).toJSON();
 
   expect(tree).toMatchSnapshot();