refactor: move styles/ into src/theme/ tree

src/components/Appbar/AppbarHeader.tsx

@@ -18,7 +18,7 @@ import {
   getAppbarBorders,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import shadow from '../../styles/shadow';
+import shadow from '../../theme/shadow';
 import type { ThemeProp } from '../../types';
 
 export type Props = Omit<

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/colors';
+import { white } from '../../theme/colors';
 import type { InternalTheme, Theme, ThemeProp } from '../../types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';

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/colors';
+import { white } from '../../theme/colors';
 import type { ThemeProp } from '../../types';
 import getContrastingColor from '../../utils/getContrastingColor';
 import Icon, { IconSource } from '../Icon';

src/components/Avatar/AvatarText.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/colors';
+import { white } from '../../theme/colors';
 import type { ThemeProp } from '../../types';
 import getContrastingColor from '../../utils/getContrastingColor';
 import Text from '../Typography/Text';

src/components/Button/utils.tsx

@@ -1,7 +1,7 @@
 import type { ViewStyle } from 'react-native';
 
-import { black, white } from '../../styles/themes/colors';
-import { tokens } from '../../styles/themes/tokens';
+import { black, white } from '../../theme/colors';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme, Theme } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 

src/components/Card/CardCover.tsx

@@ -3,7 +3,7 @@ import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { getCardCoverStyle } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { grey200 } from '../../styles/themes/colors';
+import { grey200 } from '../../theme/colors';
 import type { ThemeProp } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 

src/components/Checkbox/CheckboxItem.tsx

@@ -13,7 +13,7 @@ import Checkbox from './Checkbox';
 import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { ThemeProp, TypescaleKey } from '../../types';
 import TouchableRipple, {
   Props as TouchableRippleProps,

src/components/Checkbox/utils.ts

@@ -1,4 +1,4 @@
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/Chip/Chip.tsx

@@ -17,7 +17,7 @@ import useLatestCallback from 'use-latest-callback';
 
 import { ChipAvatarProps, getChipColors } from './helpers';
 import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/colors';
+import { white } from '../../theme/colors';
 import type { $Omit, EllipsizeProp, Theme, ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import type { IconSource } from '../Icon';

src/components/Chip/helpers.tsx

@@ -2,7 +2,7 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
 import color from 'color';
 
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme, Theme } from '../../types';
 
 const md3 = (theme: InternalTheme) => theme as Theme;

src/components/Drawer/DrawerSection.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import { Palette } from '../../styles/themes/tokens';
+import { Palette } from '../../theme/tokens';
 import type { ThemeProp } from '../../types';
 import Divider from '../Divider';
 import Text from '../Typography/Text';

src/components/HelperText/utils.ts

@@ -1,4 +1,4 @@
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/IconButton/utils.ts

@@ -1,4 +1,4 @@
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/MaterialCommunityIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentProps } from 'react';
 import { StyleSheet, Text, Platform, Role, ViewProps } from 'react-native';
 
-import { black } from '../styles/themes/colors';
+import { black } from '../theme/colors';
 
 export type IconProps = {
   name: ComponentProps<typeof MaterialCommunityIcons>['name'];

src/components/Menu/utils.ts

@@ -1,4 +1,4 @@
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 import type { IconSource } from '../Icon';
 

src/components/Modal.tsx

@@ -14,7 +14,7 @@ import useLatestCallback from 'use-latest-callback';
 
 import Surface from './Surface';
 import { useInternalTheme } from '../core/theming';
-import { tokens } from '../styles/themes/tokens';
+import { tokens } from '../theme/tokens';
 import type { ThemeProp } from '../types';
 import { addEventListener } from '../utils/addEventListener';
 import { BackHandler } from '../utils/BackHandler/BackHandler';

src/components/RadioButton/RadioButtonItem.tsx

@@ -15,7 +15,7 @@ import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import RadioButtonIOS from './RadioButtonIOS';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { ThemeProp, TypescaleKey } from '../../types';
 import TouchableRipple, {
   Props as TouchableRippleProps,

src/components/SegmentedButtons/utils.ts

@@ -1,6 +1,6 @@
 import { ViewStyle } from 'react-native';
 
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/Surface.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 
 import { useInternalTheme } from '../core/theming';
-import shadow from '../styles/shadow';
+import shadow from '../theme/shadow';
 import type { Elevation, Theme, ThemeProp } from '../types';
 import { isAnimatedValue } from '../utils/animations';
 import { forwardRef } from '../utils/forwardRef';

src/components/Switch/utils.ts

@@ -9,7 +9,7 @@ import {
   grey700,
   white,
   black,
-} from '../../styles/themes/colors';
+} from '../../theme/colors';
 import type { InternalTheme } from '../../types';
 
 type BaseProps = {

src/components/TextInput/Adornment/utils.ts

@@ -1,4 +1,4 @@
-import { tokens } from '../../../styles/themes/tokens';
+import { tokens } from '../../../theme/tokens';
 import type { InternalTheme } from '../../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/TextInput/helpers.tsx

@@ -14,7 +14,7 @@ import {
   MD3_OUTLINED_INPUT_OFFSET,
 } from './constants';
 import type { TextInputLabelProp } from './types';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
 const { stateOpacity } = tokens.md.ref;

src/components/__tests__/AnimatedFAB.test.tsx

@@ -6,7 +6,7 @@ import { Animated, StyleSheet } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import { act } from 'react-test-renderer';
 
-import { Palette } from '../../styles/themes/tokens';
+import { Palette } from '../../theme/tokens';
 import AnimatedFAB from '../FAB/AnimatedFAB';
 
 const styles = StyleSheet.create({

src/components/__tests__/Appbar/Appbar.test.tsx

@@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react-native';
 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
 
 import { getTheme } from '../../../core/theming';
-import { tokens } from '../../../styles/themes/tokens';
+import { tokens } from '../../../theme/tokens';
 import Appbar from '../../Appbar';
 import {
   getAppbarBackgroundColor,

src/components/__tests__/Avatar.test.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/colors';
+import { red500 } from '../../theme/colors';
 import * as Avatar from '../Avatar/Avatar';
 
 const styles = StyleSheet.create({

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/colors';
+import { red500 } from '../../theme/colors';
 import Badge from '../Badge';
 
 it('renders badge', () => {

src/components/__tests__/BottomNavigation.test.tsx

@@ -4,7 +4,7 @@ import { Animated, Easing, Platform, StyleSheet } from 'react-native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { Palette } from '../../styles/themes/tokens';
+import { Palette } from '../../theme/tokens';
 import BottomNavigation from '../BottomNavigation/BottomNavigation';
 import BottomNavigationRouteScreen from '../BottomNavigation/BottomNavigationRouteScreen';
 import {

src/components/__tests__/Button.test.tsx

@@ -4,8 +4,8 @@ import { Animated, StyleSheet } from 'react-native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { pink500, white } from '../../styles/themes/colors';
-import { tokens } from '../../styles/themes/tokens';
+import { pink500, white } from '../../theme/colors';
+import { tokens } from '../../theme/tokens';
 import Button from '../Button/Button';
 import { getButtonColors } from '../Button/utils';
 

src/components/__tests__/Card/Card.test.tsx

@@ -4,7 +4,7 @@ import { Animated, StyleSheet, Text } from 'react-native';
 import { act, render } from '@testing-library/react-native';
 
 import { getTheme } from '../../../core/theming';
-import { Palette } from '../../../styles/themes/tokens';
+import { Palette } from '../../../theme/tokens';
 import Button from '../../Button/Button';
 import Card from '../../Card/Card';
 import { getCardColors, getCardCoverStyle } from '../../Card/utils';

src/components/__tests__/Checkbox/utils.test.tsx

@@ -1,5 +1,5 @@
 import { getTheme } from '../../../core/theming';
-import { tokens } from '../../../styles/themes/tokens';
+import { tokens } from '../../../theme/tokens';
 import {
   getAndroidSelectionControlColor,
   getSelectionControlIOSColor,

src/components/__tests__/Chip.test.tsx

@@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react-native';
 import color from 'color';
 
 import { getTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import Chip from '../Chip/Chip';
 import { getChipColors } from '../Chip/helpers';
 

src/components/__tests__/IconButton.test.tsx

@@ -4,8 +4,8 @@ import { Animated, StyleSheet } from 'react-native';
 import { act, render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { pink500 } from '../../styles/themes/colors';
-import { tokens } from '../../styles/themes/tokens';
+import { pink500 } from '../../theme/colors';
+import { tokens } from '../../theme/tokens';
 import IconButton from '../IconButton/IconButton';
 import { getIconButtonColor } from '../IconButton/utils';
 

src/components/__tests__/ListAccordion.test.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import { render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { red500 } from '../../styles/themes/colors';
+import { red500 } from '../../theme/colors';
 import ListAccordion from '../List/ListAccordion';
 import ListAccordionGroup from '../List/ListAccordionGroup';
 import ListIcon from '../List/ListIcon';

src/components/__tests__/ListItem.test.tsx

@@ -4,7 +4,7 @@ import { Text, View } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/colors';
+import { red500 } from '../../theme/colors';
 import Chip from '../Chip/Chip';
 import IconButton from '../IconButton/IconButton';
 import ListIcon from '../List/ListIcon';

src/components/__tests__/ListSection.test.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 
-import { red500 } from '../../styles/themes/colors';
+import { red500 } from '../../theme/colors';
 import ListIcon from '../List/ListIcon';
 import ListItem from '../List/ListItem';
 import ListSection from '../List/ListSection';

src/components/__tests__/MenuItem.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import Menu from '../Menu/Menu';
 import { getMenuItemColor } from '../Menu/utils';
 

src/components/__tests__/Modal.test.tsx

@@ -8,8 +8,8 @@ import {
 
 import { act, fireEvent, render } from '@testing-library/react-native';
 
-import { LightTheme } from '../../styles/themes';
-import { tokens } from '../../styles/themes/tokens';
+import { LightTheme } from '../../theme/schemes';
+import { tokens } from '../../theme/tokens';
 import Modal from '../Modal';
 
 const { scrimAlpha } = tokens.md.ref;

src/components/__tests__/SegmentedButton.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { tokens } from '../../styles/themes/tokens';
+import { tokens } from '../../theme/tokens';
 import SegmentedButtons from '../SegmentedButtons/SegmentedButtons';
 import {
   getDisabledSegmentedButtonStyle,

src/components/__tests__/Snackbar.test.tsx

@@ -3,7 +3,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native';
 
 import { act, render } from '@testing-library/react-native';
 
-import { red200, white } from '../../styles/themes/colors';
+import { red200, white } from '../../theme/colors';
 import Snackbar from '../Snackbar';
 
 const styles = StyleSheet.create({

src/components/__tests__/Switch.test.tsx

@@ -13,7 +13,7 @@ import {
   grey800,
   pink500,
   grey700,
-} from '../../styles/themes/colors';
+} from '../../theme/colors';
 import Switch from '../Switch/Switch';
 import { getSwitchColor } from '../Switch/utils';
 

src/components/__tests__/TextInput.test.tsx

@@ -5,8 +5,8 @@ import { I18nManager, Platform, StyleSheet, Text, View } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 
 import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming';
-import { red500 } from '../../styles/themes/colors';
-import { tokens } from '../../styles/themes/tokens';
+import { red500 } from '../../theme/colors';
+import { tokens } from '../../theme/tokens';
 import {
   getFlatInputColors,
   getOutlinedInputColors,

src/components/__tests__/Typography/Text.test.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { render } from '@testing-library/react-native';
 
 import PaperProvider from '../../../core/PaperProvider';
-import configureFonts from '../../../styles/fonts';
-import { LightTheme } from '../../../styles/themes';
-import { tokens } from '../../../styles/themes/tokens';
+import configureFonts from '../../../theme/fonts';
+import { LightTheme } from '../../../theme/schemes';
+import { tokens } from '../../../theme/tokens';
 import Text, { customText } from '../../Typography/Text';
 
 const content = 'Something rendered as a child content';

src/core/__tests__/PaperProvider.test.tsx

@@ -8,7 +8,7 @@ import {
 
 import { render, act } from '@testing-library/react-native';
 
-import { LightTheme, DarkTheme } from '../../styles/themes';
+import { LightTheme, DarkTheme } from '../../theme/schemes';
 import type { ThemeProp } from '../../types';
 import PaperProvider from '../PaperProvider';
 import { useTheme } from '../theming';

src/core/__tests__/theming.test.tsx

@@ -1,4 +1,4 @@
-import { DarkTheme, LightTheme } from '../../styles/themes';
+import { DarkTheme, LightTheme } from '../../theme/schemes';
 import { adaptNavigationTheme } from '../theming';
 
 const NavigationLightTheme = {