Merge branch 'develop' into chore.upgrade-rn-0.73.6

app/containers/ActionSheet/ActionSheet.tsx

@@ -161,7 +161,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
+						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -48,13 +48,13 @@ const FooterButtons = ({
 	return (
 		<View style={styles.footerButtonsContainer}>
 			<Button
-				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.cancelButton }]}
+				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }]}
 				color={colors.backdropColor}
 				title={cancelTitle}
 				onPress={cancelAction}
 			/>
 			<Button
-				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }}
+				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
 				title={confirmTitle}
 				onPress={confirmAction}
 				disabled={disabled}
@@ -100,12 +100,12 @@ const ActionSheetContentWithInputAndSubmit = ({
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
 				<View style={styles.titleContainer}>
-					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.passcodePrimary, paddingLeft: iconName ? 16 : 0 }]}>
+					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
 				</View>
-				<Text style={[styles.subtitleText, { color: colors.titleText }]}>{description}</Text>
+				<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text>
 				{customText}
 			</>
 			{showInput ? (
@@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.fontHint}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -27,9 +27,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 		hasCancel ? (
 			<Touch
 				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
-				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
+				style={[styles.button, { backgroundColor: colors.surfaceHover }]}
+				accessibilityLabel={I18n.t('Cancel')}
+			>
+				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 
@@ -44,10 +45,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				keyExtractor={item => item.title}
 				bounces={false}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.focusedBackground }}
+				style={{ backgroundColor: colors.strokeExtraDark }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
-				contentContainerStyle={{ paddingBottom: bottom }}
+				contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
 				ItemSeparatorComponent={List.Separator}
 				ListHeaderComponent={List.Separator}
 				ListFooterComponent={renderFooter}

app/containers/ActionSheet/Handle.tsx

@@ -9,7 +9,7 @@ export const Handle = React.memo(() => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.handle} testID='action-sheet-handle'>
-			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
+			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
 		</View>
 	);
 });

app/containers/ActionSheet/Item.tsx

@@ -27,19 +27,19 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 		}
 	};
 
-	let textColor = colors.bodyText;
+	let color = colors.fontDefault;
 	if (item.danger) {
-		textColor = colors.dangerColor;
+		color = colors.fontDanger;
 	}
 	if (!enabled) {
-		textColor = colors.fontDisabled;
+		color = colors.fontDisabled;
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}>
-			{item.icon ? <CustomIcon name={item.icon} size={20} color={textColor} /> : null}
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
+			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
 			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color: textColor, marginLeft: item.icon ? 16 : 0 }]}>
+				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
 					{item.title}
 				</Text>
 			</View>

app/containers/ActivityIndicator.tsx

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
 const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
+		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].fontSecondaryInfo} {...props} />
 	);
 };
 

app/containers/AppVersion.tsx

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => (
 	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>
+		<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>
 			{I18n.t('Version_no', { version: '' })}
 			<Text style={styles.bold}>{getReadableVersion}</Text>
 		</Text>

app/containers/AudioPlayer/PlayButton.tsx

@@ -31,10 +31,10 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
 		customIconName = 'play-shape-filled';
 	}
 
-	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />;
+	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
 };
 
-const PlayButton = ({ onPress, disabled = false, audioState }: IButton) => {
+const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {
 	const { colors } = useTheme();
 
 	return (

app/containers/AudioPlayer/Seek.tsx

@@ -102,7 +102,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		} as TextInputProps;
 	}, [timeLabel, duration, currentTime]);
 
-	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
+	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
 
 	// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
 	return (

app/containers/Avatar/AvatarWithEdit.tsx

@@ -69,12 +69,11 @@ const AvatarWithEdit = ({
 				<Button
 					title={I18n.t('Edit')}
 					type='secondary'
-					backgroundColor={colors.editAndUploadButtonAvatar}
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
 					styleText={styles.textButton}
-					color={colors.titleText}
+					color={colors.fontTitlesLabels}
 					hitSlop={BUTTON_HIT_SLOP}
 				/>
 			) : null}

app/containers/BackgroundContainer/index.tsx

@@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
 		</View>
 	);
 };

app/containers/Button/index.tsx

@@ -9,7 +9,7 @@ import ActivityIndicator from '../ActivityIndicator';
 interface IButtonProps extends PlatformTouchableProps {
 	title: string;
 	onPress: () => void;
-	type?: string;
+	type?: string; // primary | secondary
 	backgroundColor?: string;
 	loading?: boolean;
 	color?: string;
@@ -34,10 +34,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Button = ({
+const Button: React.FC<IButtonProps> = ({
 	type = 'primary',
-	disabled = false,
-	loading = false,
+	disabled,
+	loading,
 	fontSize = 16,
 	title,
 	onPress,
@@ -46,32 +46,29 @@ const Button = ({
 	style,
 	styleText,
 	...otherProps
-}: IButtonProps): React.ReactElement => {
+}) => {
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
+	const isDisabled = disabled || loading;
 
-	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
-	if (color) {
-		textColor = color;
-	}
+	const defaultBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
+	const disabledBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundSecondaryDisabled;
+
+	const resolvedBackgroundColor = backgroundColor || defaultBackgroundColor;
+	const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
+
+	const containerStyle = [
+		styles.container,
+		{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
+		isDisabled && backgroundColor ? styles.disabled : {},
+		style
+	];
+
+	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
-		<Touchable
-			onPress={onPress}
-			disabled={disabled || loading}
-			style={[
-				styles.container,
-				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
-				disabled && styles.disabled,
-				style
-			]}
-			accessibilityLabel={title}
-			{...otherProps}>
-			{loading ? (
-				<ActivityIndicator color={textColor} />
-			) : (
-				<Text style={[styles.text, { color: textColor, fontSize }, styleText]}>{title}</Text>
-			)}
+		<Touchable onPress={onPress} disabled={isDisabled} style={containerStyle} accessibilityLabel={title} {...otherProps}>
+			{loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
 		</Touchable>
 	);
 };

app/containers/CallHeader.tsx

@@ -30,11 +30,11 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 
 	const handleColors = (enabled: boolean) => {
 		if (calling) {
-			if (enabled) return { button: colors.conferenceCallCallBackButton, icon: colors.gray300 };
-			return { button: 'transparent', icon: colors.gray100 };
+			if (enabled) return { button: colors.buttonBackgroundSecondaryDisabled, icon: colors.strokeExtraDark };
+			return { button: 'transparent', icon: colors.strokeLight };
 		}
-		if (enabled) return { button: colors.conferenceCallEnabledIconBackground, icon: colors.conferenceCallEnabledIcon };
-		return { button: 'transparent', icon: colors.conferenceCallDisabledIcon };
+		if (enabled) return { button: colors.strokeHighlight, icon: colors.surfaceLight };
+		return { button: 'transparent', icon: colors.strokeExtraDark };
 	};
 
 	return (
@@ -79,7 +79,7 @@ function useStyle() {
 		actionSheetHeaderTitle: {
 			fontSize: 14,
 			...sharedStyles.textBold,
-			color: colors.n900
+			color: colors.fontDefault
 		},
 		actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' },
 		iconCallContainer: {
@@ -95,7 +95,7 @@ function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary,
+			color: colors.fontDefault,
 			flexShrink: 1
 		},
 		rowContainer: { flexDirection: 'row' },

app/containers/Check.tsx

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 
 const Check = React.memo(() => {
 	const { theme } = useTheme();
-	return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
+	return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
 });
 
 export default Check;

app/containers/Chip/index.tsx

@@ -49,23 +49,24 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
 			style={({ pressed }) => [
 				styles.pressable,
 				{
-					backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground
+					backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
 				},
 				style
 			]}
 			disabled={!onPress}
 			onPress={() => onPress?.()}
 			android_ripple={{
-				color: colors.bannerBackground
-			}}>
+				color: colors.surfaceNeutral
+			}}
+		>
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{text}
 					</Text>
 				</View>
-				{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null}
+				{onPress ? <CustomIcon name='close' size={16} /> : null}
 			</View>
 		</Pressable>
 	);

app/containers/CollapsibleText/index.tsx

@@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	if (truncatedText && showTruncated) {
 		return (
 			<Text testID={`collapsible-text-truncated-${m}`}>
-				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}>
+				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
 					{`${truncatedText}... `}
 				</Text>
-				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}>
+				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint }]}>
 					{I18n.t('Show_more')}
 				</Text>
 			</Text>
@@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]}
+			style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
 			testID={`collapsible-text-${m}`}
 			onTextLayout={event => {
 				const { lines } = event.nativeEvent;
@@ -67,13 +67,15 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}>
+			}}
+		>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.actionTintColor }]}>
+					style={[styles.textInfo, { color: colors.fontHint }]}
+				>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

app/containers/CustomIcon/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import { TextProps } from 'react-native';
+import type { IconProps } from 'react-native-vector-icons/Icon';
 
 import { mappedIcons } from './mappedIcons';
+import { useTheme } from '../../theme';
 
 const icoMoonConfig = require('./selection.json');
 
@@ -10,14 +11,15 @@ export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom
 
 export type TIconsName = keyof typeof mappedIcons;
 
-export interface ICustomIcon extends TextProps {
+export interface ICustomIcon extends IconProps {
 	name: TIconsName;
 	size: number;
-	color: string;
+	color?: string;
 }
 
-const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon) => (
-	// @ts-ignore TODO remove this after update @types/react-native to 0.65.0
-	<IconSet name={name} size={size} color={color} style={[{ lineHeight: size }, style]} {...props} />
-);
+const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
+	const { colors } = useTheme();
+	return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
+};
+
 export { CustomIcon };

app/containers/DirectoryItem/index.tsx

@@ -33,7 +33,7 @@ const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) =>
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({
@@ -50,20 +50,20 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
 			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>
 					<View style={styles.directoryItemTextTitle}>
 						{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
-						<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.directoryItemName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>
 					</View>
 					{description ? (
 						<MarkdownPreview
 							msg={description}
-							style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]}
+							style={[styles.directoryItemUsername, { color: themes[theme].fontSecondaryInfo }]}
 							numberOfLines={1}
 						/>
 					) : null}

app/containers/DotsLoader/index.tsx

@@ -31,7 +31,7 @@ function Dot({ active }: { active: boolean }): JSX.Element {
 		width: SIZE,
 		borderRadius: SIZE / 2,
 		marginHorizontal: MARGIN,
-		backgroundColor: active ? colors.dotActiveBg : colors.dotBg
+		backgroundColor: active ? colors.badgeBackgroundLevel2 : colors.badgeBackgroundLevel1
 	};
 
 	return <Animated.View style={[style, animatedStyle]} />;

app/containers/EmojiPicker/Footer.tsx

@@ -18,8 +18,9 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-search'>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
+				testID='emoji-picker-search'
+			>
+				<CustomIcon size={24} name='search' />
 			</Pressable>
 
 			<Pressable
@@ -29,8 +30,9 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-backspace'>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
+				testID='emoji-picker-backspace'
+			>
+				<CustomIcon size={24} name='backspace' />
 			</Pressable>
 		</View>
 	);

app/containers/FormContainer.tsx

@@ -31,16 +31,18 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].backgroundColor }}
+			style={{ backgroundColor: themes[theme].surfaceRoom }}
 			contentContainerStyle={sharedStyles.container}
-			keyboardVerticalOffset={128}>
+			keyboardVerticalOffset={128}
+		>
 			<StatusBar />
 			<ScrollView
 				style={sharedStyles.container}
 				contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
 				{...scrollPersistTaps}
-				{...props}>
-				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
+				{...props}
+			>
+				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 					{children}
 					<AppVersion theme={theme} />
 				</SafeAreaView>

app/containers/HeaderButton/Common.tsx

@@ -5,19 +5,21 @@ import I18n from '../../i18n';
 import { isIOS } from '../../lib/methods/helpers';
 import Container from './HeaderButtonContainer';
 import Item, { IHeaderButtonItem } from './HeaderButtonItem';
+import { useTheme } from '../../theme';
 
 interface IHeaderButtonCommon extends IHeaderButtonItem {
 	navigation?: any; // TODO: Evaluate proper type
 }
 
 // Left
-export const Drawer = React.memo(
-	({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
+export const Drawer = ({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => {
+	const { colors } = useTheme();
+	return (
 		<Container left>
-			<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} />
+			<Item iconName='hamburguer' onPress={onPress} testID={testID} color={colors.fontDefault} {...props} />
 		</Container>
-	)
-);
+	);
+};
 
 export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
 	const { dispatch } = useNavigation();

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import { PlatformPressable } from '@react-navigation/elements';
 
-import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 
-export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> {
+export interface IHeaderButtonItem {
 	title?: string;
 	iconName?: TIconsName;
 	onPress?: <T>(arg: T) => void;
@@ -56,9 +56,9 @@ const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...pro
 			]}>
 			<>
 				{iconName ? (
-					<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />
+					<CustomIcon name={iconName} size={24} color={color} {...props} />
 				) : (
-					<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}>
+					<Text style={[styles.title, { color: color || colors.fontDefault }]} {...props}>
 						{title}
 					</Text>
 				)}

app/containers/HeaderButton/HeaderButtons.stories.tsx

@@ -33,7 +33,7 @@ const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
 		title={title}
 		headerLeft={left}
 		headerRight={right}
-		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
+		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.surfaceNeutral }} />}
 	/>
 );
 
@@ -120,7 +120,7 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 			<HeaderExample
 				left={() => (
 					<HeaderButton.Container left>
-						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />} />
+						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />} />
 						<HeaderButton.Item iconName='threads' />
 					</HeaderButton.Container>
 				)}

app/containers/ImageViewer/ImageViewer.tsx

@@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
 	const { colors } = useTheme();
 
 	return (
-		<View style={[styles.flex, { width, height, backgroundColor: colors.previewBackground }]}>
+		<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceRoom }]}>
 			<GestureDetector gesture={gesture}>
 				<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
 					<Component

app/containers/InAppNotification/IncomingCallNotification/index.tsx

@@ -10,7 +10,6 @@ import i18n from '../../../i18n';
 import { useAppSelector } from '../../../lib/hooks';
 import { useEndpointData } from '../../../lib/hooks/useEndpointData';
 import { hideNotification } from '../../../lib/methods/helpers/notifications';
-import { useTheme } from '../../../theme';
 import { CustomIcon } from '../../CustomIcon';
 import { CallHeader } from '../../CallHeader';
 import { useStyle } from './style';
@@ -41,7 +40,6 @@ const IncomingCallHeader = React.memo(
 		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 		const styles = useStyle();
 		const insets = useSafeAreaInsets();
-		const { colors } = useTheme();
 
 		return (
 			<View
@@ -51,7 +49,8 @@ const IncomingCallHeader = React.memo(
 					{
 						marginTop: insets.top
 					}
-				]}>
+				]}
+			>
 				<CallHeader
 					title={i18n.t('Incoming_call_from')}
 					cam={cam}
@@ -70,8 +69,9 @@ const IncomingCallHeader = React.memo(
 							setAudio(!audio);
 							hideNotification();
 						}}
-						style={styles.closeButton}>
-						<CustomIcon name='close' size={20} color={colors.gray300} />
+						style={styles.closeButton}
+					>
+						<CustomIcon name='close' size={20} />
 					</Touchable>
 					<Touchable
 						hitSlop={BUTTON_HIT_SLOP}
@@ -80,7 +80,8 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(cancelCall({ callId }));
 						}}
-						style={styles.cancelButton}>
+						style={styles.cancelButton}
+					>
 						<Text style={styles.buttonText}>{i18n.t('decline')}</Text>
 					</Touchable>
 					<Touchable
@@ -90,7 +91,8 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(acceptCall({ callId }));
 						}}
-						style={styles.acceptButton}>
+						style={styles.acceptButton}
+					>
 						<Text style={styles.buttonText}>{i18n.t('accept')}</Text>
 					</Touchable>
 				</View>

app/containers/InAppNotification/IncomingCallNotification/style.tsx

@@ -13,8 +13,8 @@ export const useStyle = () => {
 			marginHorizontal: 10,
 			borderWidth: StyleSheet.hairlineWidth,
 			borderRadius: 4,
-			backgroundColor: colors.focusedBackground,
-			borderColor: colors.separatorColor,
+			backgroundColor: colors.surfaceLight,
+			borderColor: colors.strokeLight,
 			flex: 1
 		},
 		small: {
@@ -26,7 +26,7 @@ export const useStyle = () => {
 			marginTop: 12
 		},
 		closeButton: {
-			backgroundColor: colors.passcodeButtonActive,
+			backgroundColor: colors.buttonBackgroundSecondaryDefault,
 			marginRight: 8,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -36,7 +36,7 @@ export const useStyle = () => {
 		},
 		cancelButton: {
 			borderRadius: 4,
-			backgroundColor: colors.cancelCallButton,
+			backgroundColor: colors.buttonBackgroundDangerDefault,
 			marginRight: 8,
 			flex: 2,
 			alignItems: 'center',
@@ -48,7 +48,7 @@ export const useStyle = () => {
 		},
 		acceptButton: {
 			borderRadius: 4,
-			backgroundColor: colors.acceptCallButton,
+			backgroundColor: colors.buttonBackgroundSuccessDefault,
 			flex: 2,
 			alignItems: 'center',
 			justifyContent: 'center'

app/containers/InAppNotification/NotifierComponent.tsx

@@ -103,8 +103,8 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				styles.container,
 				isMasterDetail && styles.small,
 				{
-					backgroundColor: themes[theme].focusedBackground,
-					borderColor: themes[theme].separatorColor,
+					backgroundColor: themes[theme].surfaceLight,
+					borderColor: themes[theme].strokeLight,
 					marginTop: insets.top
 				}
 			]}>
@@ -117,17 +117,17 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				<>
 					<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
 					<View style={styles.inner}>
-						<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>
-						<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{text}
 						</Text>
 					</View>
 				</>
 			</Touchable>
 			<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
-				<CustomIcon name='close' size={20} color={themes[theme].titleText} style={styles.close} />
+				<CustomIcon name='close' size={20} style={styles.close} />
 			</Touchable>
 		</View>
 	);

app/containers/List/ListHeader.tsx

@@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>

app/containers/List/ListIcon.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { themes } from '../../lib/constants';
 import { CustomIcon, TIconsName } from '../CustomIcon';
-import { useTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
 	name: TIconsName;
-	color?: string | null;
+	color?: string;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;
 	size?: number;
@@ -21,15 +19,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) => {
-	const { theme } = useTheme();
-
-	return (
-		<View style={[styles.icon, style]}>
-			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={size ?? ICON_SIZE} testID={testID} />
-		</View>
-	);
-});
+const ListIcon = ({ name, color, style, testID, size }: IListIcon): React.ReactElement => (
+	<View style={[styles.icon, style]}>
+		<CustomIcon name={name} color={color} size={size ?? ICON_SIZE} testID={testID} />
+	</View>
+);
 
 ListIcon.displayName = 'List.Icon';
 

app/containers/List/ListInfo.tsx

@@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });

app/containers/List/ListItem.tsx

@@ -96,15 +96,15 @@ const Content = React.memo(
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>
-						<Text style={[styles.title, styleTitle, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, styleTitle, { color: color || themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{translateTitle && title ? I18n.t(title) : title}
 						</Text>
 						{alert ? (
-							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} />
+							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].buttonBackgroundDangerDefault} style={styles.alertIcon} />
 						) : null}
 					</View>
 					{subtitle ? (
-						<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+						<Text style={[styles.subtitle, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
 							{translateSubtitle ? I18n.t(subtitle) : subtitle}
 						</Text>
 					) : null}
@@ -135,7 +135,7 @@ interface IListItemButton {
 const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}>
 		<Content {...props} />
@@ -155,7 +155,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
 		return <Button {...props} theme={theme} onPress={onPress} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
 			<Content {...props} theme={theme} />
 		</View>
 	);

app/containers/List/ListSeparator.tsx

@@ -17,7 +17,7 @@ interface IListSeparator {
 const ListSeparator = React.memo(({ style }: IListSeparator) => {
 	const { theme } = useTheme();
 
-	return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />;
+	return <View style={[styles.separator, style, { backgroundColor: themes[theme].strokeLight }]} />;
 });
 
 ListSeparator.displayName = 'List.Separator';

app/containers/LoginServices/ButtonService.tsx

@@ -16,12 +16,11 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
 			onPress={onPress}
 			style={[styles.serviceButton, { backgroundColor }]}
 			activeOpacity={0.5}
-			underlayColor={colors.buttonText}>
+			underlayColor={colors.fontWhite}
+		>
 			<View style={styles.serviceButtonContainer}>
-				{authType === 'oauth' || authType === 'apple' ? (
-					<CustomIcon name={icon} size={24} color={colors.titleText} style={styles.serviceIcon} />
-				) : null}
-				<Text style={[styles.serviceText, { color: colors.titleText }]}>{buttonText}</Text>
+				{authType === 'oauth' || authType === 'apple' ? <CustomIcon name={icon} size={24} style={styles.serviceIcon} /> : null}
+				<Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>
 			</View>
 		</Touch>
 	);

app/containers/LoginServices/LoginServices.stories.tsx

@@ -84,7 +84,7 @@ export const ServiceList = () => (
 				<ButtonService
 					key={service._id}
 					onPress={() => {}}
-					backgroundColor={colors[theme].chatComponentBackground}
+					backgroundColor={colors[theme].surfaceTint}
 					buttonText={buttonText}
 					icon={icon}
 					name={service.name}

app/containers/LoginServices/Service.tsx

@@ -86,7 +86,7 @@ const Service = React.memo(
 			);
 		}
 
-		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.chatComponentBackground;
+		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.buttonBackgroundSecondaryDefault;
 
 		return (
 			<ButtonService

app/containers/LoginServices/ServicesSeparator.tsx

@@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
 					type='secondary'
 					onPress={onPress}
 					style={styles.options}
-					color={colors.actionTintColor}
+					color={colors.fontHint}
 				/>
 				<OrSeparator theme={theme} />
 			</>

app/containers/MessageActions/Header.tsx

@@ -65,7 +65,8 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
 	<Touch
 		testID={`message-actions-emoji-${item}`}
 		onPress={() => onReaction({ emoji: item })}
-		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
+	>
 		{typeof item === 'string' ? (
 			<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
 		) : (
@@ -78,8 +79,9 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Touch
 		testID='add-reaction'
 		onPress={(param: any) => onReaction(param)}
-		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-		<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
+	>
+		<CustomIcon name='reaction-add' size={24} />
 	</Touch>
 );
 
@@ -106,12 +108,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].surfaceLight }]}>
 			<FlatList
 				data={frequentlyUsed.slice(0, quantity)}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme].surfaceLight }}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}

app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx

@@ -9,7 +9,7 @@ import { NO_CANNED_RESPONSES } from '../../constants';
 import { useStyle } from './styles';
 
 export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCannedResponse }) => {
-	const [styles, colors] = useStyle();
+	const [styles] = useStyle();
 	if (item.id === NO_CANNED_RESPONSES) {
 		return (
 			<View style={styles.canned}>
@@ -17,7 +17,7 @@ export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCanned
 					<Text style={styles.cannedTitleText}>
 						{I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text>
 					</Text>
-					<CustomIcon name='chevron-right' size={24} color={colors.fontHint} />
+					<CustomIcon name='chevron-right' size={24} />
 				</View>
 			</View>
 		);

app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx

@@ -19,7 +19,7 @@ export const AutocompletePreview = ({ item, onPress }: IAutocompleteItemProps) =
 			item.preview.type === 'image' ? (
 				<FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} />
 			) : (
-				<CustomIcon name='attach' size={36} color={colors.fontInfo} />
+				<CustomIcon name='attach' size={36} />
 			);
 	}
 

app/containers/MessageComposer/components/Buttons/BaseButton.tsx

@@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
 
 import I18n from '../../../../i18n';
 import { CustomIcon, TIconsName } from '../../../CustomIcon';
-import { useTheme } from '../../../../theme';
 
 export interface IBaseButton {
 	testID: string;
@@ -21,16 +20,13 @@ export const hitSlop = {
 	left: 16
 };
 
-export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => {
-	const { colors } = useTheme();
-	return (
-		<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
-			<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
-				<CustomIcon name={icon} size={24} color={color || colors.fontSecondaryInfo} />
-			</View>
-		</BorderlessButton>
-	);
-};
+export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => (
+	<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
+		<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
+			<CustomIcon name={icon} size={24} color={color} />
+		</View>
+	</BorderlessButton>
+);
 
 const styles = StyleSheet.create({
 	button: {

app/containers/MessageComposer/components/EmojiSearchbar.tsx

@@ -64,8 +64,9 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
 					style={({ pressed }: { pressed: boolean }) => [styles.backButton, { opacity: pressed ? 0.7 : 1 }]}
 					onPress={openEmojiKeyboard}
 					hitSlop={BUTTON_HIT_SLOP}
-					testID='openback-emoji-keyboard'>
-					<CustomIcon name='chevron-left' size={24} color={colors.fontHint} />
+					testID='openback-emoji-keyboard'
+				>
+					<CustomIcon name='chevron-left' size={24} />
 				</Pressable>
 				<View style={styles.inputContainer}>
 					<EmojiSearch onBlur={closeEmojiKeyboard} onChangeText={handleTextChange} />

app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx

@@ -95,16 +95,21 @@ export const RecordAudio = (): ReactElement | null => {
 		try {
 			if (!rid) return;
 			setRecordingAudio(false);
-			const fileURI = recordingRef.current?.getURI();
-			const fileData = await getInfoAsync(fileURI as string);
-			const fileInfo = {
+			const fileURI = recordingRef.current?.getURI() as string;
+			const fileData = await getInfoAsync(fileURI);
+
+			if (!fileData.exists) {
+				return;
+			}
+
+			const fileInfo: IUpload = {
+				rid,
 				name: `${Date.now()}${RECORDING_EXTENSION}`,
-				mime: 'audio/aac',
 				type: 'audio/aac',
 				store: 'Uploads',
 				path: fileURI,
-				size: fileData.exists ? fileData.size : null
-			} as IUpload;
+				size: fileData.size
+			};
 
 			if (fileInfo) {
 				if (permissionToUpload) {

app/containers/MessageComposer/components/SendThreadToChannel.tsx

@@ -75,9 +75,9 @@ export const SendThreadToChannel = (): React.ReactElement | null => {
 				testID={alsoSendThreadToChannel ? 'send-to-channel-checked' : 'send-to-channel-unchecked'}
 				name={alsoSendThreadToChannel ? 'checkbox-checked' : 'checkbox-unchecked'}
 				size={24}
-				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.strokeDark}
+				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.fontDefault}
 			/>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
+			<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
 		</TouchableWithoutFeedback>
 	);
 };

app/containers/OrSeparator.tsx

@@ -29,8 +29,8 @@ interface IOrSeparator {
 }
 
 const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
-	const line = { backgroundColor: themes[theme].borderColor };
-	const text = { color: themes[theme].auxiliaryText };
+	const line = { backgroundColor: themes[theme].strokeLight };
+	const text = { color: themes[theme].fontSecondaryInfo };
 	return (
 		<View style={styles.container}>
 			<View style={[styles.line, line]} />

app/containers/Passcode/Base/Button.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Text, StyleProp, ViewStyle } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import Touch from '../../Touch';
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
@@ -16,21 +15,22 @@ interface IPasscodeButton {
 }
 
 const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
 			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
-			underlayColor={themes[theme].passcodeButtonActive}
-			rippleColor={themes[theme].passcodeButtonActive}
+			underlayColor={colors.buttonBackgroundSecondaryDefault}
+			rippleColor={colors.buttonBackgroundSecondaryPress}
 			enabled={!disabled}
-			onPress={press}>
+			onPress={press}
+		>
 			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
+				<CustomIcon name={icon} size={36} />
 			) : (
-				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</Text>
 			)}
 		</Touch>
 	);

app/containers/Passcode/Base/Dots.tsx

@@ -3,7 +3,6 @@ import { View } from 'react-native';
 import range from 'lodash/range';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 const SIZE_EMPTY = 12;
@@ -15,7 +14,7 @@ interface IPasscodeDots {
 }
 
 const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<View style={styles.dotsContainer}>
@@ -25,9 +24,9 @@ const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
 				const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 				let backgroundColor = '';
 				if (lengthSup && passcode.length > 0) {
-					backgroundColor = themes[theme].passcodeDotFull;
+					backgroundColor = colors.strokeDark;
 				} else {
-					backgroundColor = themes[theme].passcodeDotEmpty;
+					backgroundColor = colors.strokeLight;
 				}
 				const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
 				const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;

app/containers/Passcode/Base/LockIcon.tsx

@@ -3,20 +3,19 @@ import { View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
-const LockIcon = React.memo(() => {
-	const { theme } = useTheme();
+const LockIcon = () => {
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.iconView}>
-				<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} />
+				<CustomIcon name='auth' size={40} color={colors.fontSecondaryInfo} />
 			</View>
 		</Row>
 	);
-});
+};
 
 export default LockIcon;

app/containers/Passcode/Base/Locked.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Grid } from 'react-native-easy-grid';
 
-import { themes } from '../../../lib/constants';
 import { resetAttempts } from '../../../lib/methods/helpers/localAuthentication';
 import { TYPE } from '../constants';
 import { getDiff, getLockedUntil } from '../utils';
@@ -50,7 +49,7 @@ const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
 
 const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const readItemFromStorage = async () => {
 		const l = await getLockedUntil();
@@ -62,7 +61,7 @@ const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	}, []);
 
 	return (
-		<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+		<Grid style={[styles.grid, { backgroundColor: colors.strokeExtraLight }]}>
 			<LockIcon />
 			<Title text={I18n.t('Passcode_app_locked_title')} />
 			<Timer time={lockedUntil} setStatus={setStatus} />

app/containers/Passcode/Base/Subtitle.tsx

@@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.subtitleView}>
-				<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text>
+				<Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
 			</View>
 		</Row>
 	);

app/containers/Passcode/Base/Title.tsx

@@ -3,7 +3,6 @@ import { Text, View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IPasscodeTitle {
@@ -11,12 +10,12 @@ interface IPasscodeTitle {
 }
 
 const Title = React.memo(({ text }: IPasscodeTitle) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.titleView}>
-				<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</Text>
 			</View>
 		</Row>
 	);

app/containers/Passcode/Base/index.tsx

@@ -9,7 +9,7 @@ import styles from './styles';
 import Button from './Button';
 import Dots from './Dots';
 import { TYPE } from '../constants';
-import { PASSCODE_LENGTH, themes } from '../../../lib/constants';
+import { PASSCODE_LENGTH } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import LockIcon from './LockIcon';
 import Title from './Title';
@@ -35,7 +35,7 @@ export interface IBase {
 
 const Base = forwardRef<IBase, IPasscodeBase>(
 	({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
-		const { theme } = useTheme();
+		const { colors } = useTheme();
 		const { height } = useDimensions();
 
 		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
@@ -101,7 +101,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 
 		return (
 			<Animatable.View ref={rootRef} style={styles.container}>
-				<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+				<Grid style={[styles.grid, { backgroundColor: colors.surfaceNeutral }]}>
 					<LockIcon />
 					<Title text={title} />
 					{subtitle ? <Subtitle text={subtitle} /> : null}

app/containers/RadioButton/index.tsx

@@ -10,7 +10,7 @@ export const RadioButton = ({ check, testID, size }: { check: boolean; testID?:
 			testID={testID}
 			selected={check}
 			size={size || 20}
-			color={check ? colors.tintActive : colors.auxiliaryTintColor}
+			color={check ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled}
 		/>
 	);
 };

app/containers/ReactionsList/AllTab.tsx

@@ -52,10 +52,10 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
-				<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}>
+				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
-				<Text style={[styles.allListWhoReacted, { color: colors.auxiliaryText }]}>{displayNames}</Text>
+				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
 			</View>
 		</View>
 	);

app/containers/ReactionsList/ReactionsTabBar.tsx

@@ -36,7 +36,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 			testID={`tabBarItem-${tab.emoji}`}>
 			<View style={styles.tabBarItem}>
 				{tab._id === 'All' ? (
-					<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text>
+					<Text style={[styles.allTabItem, { color: colors.fontHint }]}>{I18n.t('All')}</Text>
 				) : (
 					<>
 						<Emoji
@@ -45,7 +45,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 							customEmojiStyle={styles.customEmojiStyle}
 							getCustomEmoji={getCustomEmoji}
 						/>
-						<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text>
+						<Text style={[styles.reactionCount, { color: colors.fontHint }]}>{tab.usernames.length}</Text>
 					</>
 				)}
 			</View>
@@ -67,7 +67,7 @@ const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactio
 							style={{
 								width: tabWidth,
 								borderBottomWidth: isActiveTab ? 2 : 1,
-								borderColor: isActiveTab ? colors.tintActive : colors.separatorColor
+								borderColor: isActiveTab ? colors.strokeHighlight : colors.strokeLight
 							}}
 							key={tab.emoji}>
 							<TabBarItem tab={tab} index={index} goToPage={goToPage} getCustomEmoji={getCustomEmoji} />

app/containers/ReactionsList/UsersList.tsx

@@ -23,7 +23,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 			contentContainerStyle={styles.listContainer}
 			ListHeaderComponent={
 				<View style={styles.emojiNameContainer}>
-					<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
+					<Text style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
 						{emoji}
 					</Text>
 				</View>
@@ -32,7 +32,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 				<View style={styles.listItemContainer} testID='userItem'>
 					<Avatar text={item.username} size={36} />
 					<View style={styles.textContainer}>
-						<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
+						<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
 							{useRealName && item.name ? item.name : item.username}
 						</Text>
 					</View>

app/containers/RoomHeader/RoomHeader.stories.tsx

@@ -14,7 +14,7 @@ export default {
 
 const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
 	// Using View directly instead of Header from react-navigation because it's easier to test.
-	<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View>
+	<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].surfaceNeutral }}>{title()}</View>
 );
 
 const RoomHeader = ({ ...props }) => (

app/containers/RoomHeader/RoomHeader.tsx

@@ -88,7 +88,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 			usersText = usersTyping.join(', ');
 		}
 		return (
-			<Text style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} numberOfLines={1}>
+			<Text style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 				<Text style={styles.typingUsers}>{usersText} </Text>
 				{usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing')}...
 			</Text>
@@ -102,7 +102,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 	// subtitle
 	if (subtitle) {
-		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} />;
+		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
 	}
 
 	return null;
@@ -110,7 +110,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
 	const { colors } = useTheme();
-	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor };
+	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
 	if (!tmid && !prid) {
 		return (
 			<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>
@@ -163,7 +163,7 @@ const Header = React.memo(
 						status={status}
 						teamMain={teamMain}
 					/>
-					<Text style={[styles.subtitle, { color: colors.auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>

app/containers/RoomItem/Actions.tsx

@@ -36,16 +36,17 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
 			<Animated.View
 				style={[
 					styles.actionLeftButtonContainer,
-					{ width: width * 2, backgroundColor: colors.tintColor, right: '100%' },
+					{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
 					viewHeight,
 					animatedStyles
-				]}>
+				]}
+			>
 				<View style={[styles.actionLeftButtonContainer, viewHeight]}>
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
 						<CustomIcon
 							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 							name={isRead ? 'flag' : 'check'}
-							color={colors.buttonText}
+							color={colors.fontWhite}
 						/>
 					</RectButton>
 				</View>
@@ -117,17 +118,18 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width,
-						backgroundColor: colors.favoriteBackground,
+						backgroundColor: colors.statusFontWarning,
 						left: '100%'
 					},
 					viewHeight,
 					animatedFavStyles
-				]}>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.favoriteBackground }]} onPress={toggleFav}>
+				]}
+			>
+				<RectButton style={[styles.actionButton, { backgroundColor: colors.statusFontWarning }]} onPress={toggleFav}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name={favorite ? 'star-filled' : 'star'}
-						color={colors.buttonText}
+						color={colors.fontWhite}
 					/>
 				</RectButton>
 			</Animated.View>
@@ -136,17 +138,21 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width: width * 2,
-						backgroundColor: colors.hideBackground,
+						backgroundColor: colors.buttonBackgroundSecondaryPress,
 						left: '100%'
 					},
 					isCondensed && { height: ROW_HEIGHT_CONDENSED },
 					animatedHideStyles
-				]}>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.hideBackground }]} onPress={onHidePress}>
+				]}
+			>
+				<RectButton
+					style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]}
+					onPress={onHidePress}
+				>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name='unread-on-top-disabled'
-						color={colors.buttonText}
+						color={colors.fontWhite}
 					/>
 				</RectButton>
 			</Animated.View>

app/containers/RoomItem/LastMessage.tsx

@@ -75,7 +75,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
 				username,
 				useRealName
 			})}
-			style={[styles.markdownText, { color: alert ? colors.bodyText : colors.auxiliaryText }, alignSelf]}
+			style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
 			numberOfLines={2}
 		/>
 	);

app/containers/RoomItem/Tag.tsx

@@ -14,8 +14,8 @@ const Tag = React.memo(({ name, testID }: ITag) => {
 	const { theme } = useTheme();
 
 	return (
-		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
-			<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}>
+		<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
+			<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
 				{name}
 			</Text>
 		</View>

app/containers/RoomItem/Title.tsx

@@ -9,7 +9,7 @@ const Title = React.memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
 	const { colors } = useTheme();
 	return (
 		<Text
-			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.titleText }]}
+			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels }]}
 			ellipsizeMode='tail'
 			numberOfLines={1}>
 			{name}

app/containers/RoomItem/Touchable.tsx

@@ -223,8 +223,9 @@ const Touchable = ({
 								onPress={handlePress}
 								testID={testID}
 								style={{
-									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
-								}}>
+									backgroundColor: isFocused ? colors.surfaceTint : colors.surfaceRoom
+								}}
+							>
 								{children}
 							</Touch>
 						</Animated.View>

app/containers/RoomItem/UpdatedAt.tsx

@@ -17,13 +17,13 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
 			style={[
 				styles.date,
 				{
-					color: colors.auxiliaryText
+					color: colors.fontSecondaryInfo
 				},
 				alert &&
 					!hideUnreadStatus && [
 						styles.updateAlert,
 						{
-							color: colors.tintColor
+							color: colors.badgeBackgroundLevel2
 						}
 					]
 			]}

app/containers/RoomItem/Wrapper.tsx

@@ -18,7 +18,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.separatorColor
+						borderColor: colors.strokeLight
 					}
 				]}>
 				{children}

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-import { OmnichannelSourceType, IOmnichannelSource } from '../../definitions';
-import { STATUS_COLORS } from '../../lib/constants';
+import { OmnichannelSourceType, IOmnichannelSource, TUserStatus } from '../../definitions';
 import { useAppSelector } from '../../lib/hooks';
 import { CustomIcon, TIconsName } from '../CustomIcon';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 interface IIconMap {
 	[key: string]: TIconsName;
@@ -24,7 +24,7 @@ interface IOmnichannelRoomIconProps {
 	size: number;
 	type: string;
 	style?: StyleProp<ViewStyle>;
-	status?: string;
+	status?: TUserStatus;
 	sourceType?: IOmnichannelSource;
 }
 
@@ -33,15 +33,9 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 	const [svgError, setSvgError] = useState(false);
 	const baseUrl = useAppSelector(state => state.server?.server);
 	const connected = useAppSelector(state => state.meteor?.connected);
+	const userStatusColor = useUserStatusColor(status || 'offline');
 
-	const customIcon = (
-		<CustomIcon
-			name={iconMap[sourceType?.type || 'other']}
-			size={size}
-			style={style}
-			color={STATUS_COLORS[status || 'offline']}
-		/>
-	);
+	const customIcon = <CustomIcon name={iconMap[sourceType?.type || 'other']} size={size} style={style} color={userStatusColor} />;
 
 	if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
 		return (
@@ -49,7 +43,7 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 				<SvgUri
 					height={size}
 					width={size}
-					color={STATUS_COLORS[status || 'offline']}
+					color={userStatusColor}
 					uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
 					style={style}
 					onError={() => setSvgError(true)}

app/containers/RoomTypeIcon/index.tsx

@@ -55,7 +55,7 @@ const RoomTypeIcon = React.memo(
 			icon = 'message';
 		}
 
-		return <CustomIcon name={icon} size={size} color={themes[theme].titleText} style={iconStyle} />;
+		return <CustomIcon name={icon} size={size} color={themes[theme].fontTitlesLabels} style={iconStyle} />;
 	}
 );
 

app/containers/SafeAreaView.tsx

@@ -23,7 +23,7 @@ const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }:
 	const { theme } = useTheme();
 	return (
 		<SafeAreaContext
-			style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+			style={[styles.view, { backgroundColor: themes[theme].surfaceHover }, style]}
 			edges={vertical ? ['right', 'left'] : undefined}
 			{...props}>
 			{children}

app/containers/SearchBox/index.tsx

@@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
 	}, []);
 
 	return (
-		<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
+		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}

app/containers/SearchHeader.tsx

@@ -32,7 +32,7 @@ const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.E
 		<View style={styles.container}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }]}
+				style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }]}
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				testID={testID}

app/containers/ServerItem/index.tsx

@@ -31,10 +31,11 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			onPress={onPress}
 			onLongPress={() => onLongPress?.()}
 			testID={`rooms-list-header-server-${item.id}`}
-			android_ripple={{ color: themes[theme].bannerBackground }}
+			android_ripple={{ color: themes[theme].surfaceNeutral }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
-			})}>
+				backgroundColor: isIOS && pressed ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom
+			})}
+		>
 			<View style={styles.serverItemContainer}>
 				{item.iconURL ? (
 					<FastImage
@@ -51,10 +52,10 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 					<FastImage source={defaultLogo} style={styles.serverIcon} />
 				)}
 				<View style={styles.serverTextContainer}>
-					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>
+					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].fontTitlesLabels }]}>
 						{item.name || item.id}
 					</Text>
-					<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>
+					<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].fontSecondaryInfo }]}>
 						{item.id}
 					</Text>
 				</View>

app/containers/Status/Status.tsx

@@ -1,11 +1,16 @@
+// @ts-nocheck
 import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
+import { useTheme } from '../../theme';
 import { CustomIcon, IconSet, TIconsName } from '../CustomIcon';
-import { STATUS_COLORS } from '../../lib/constants';
 import { IStatusComponentProps } from './definition';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatusComponentProps) => {
+	const { colors } = useTheme();
+	const userStatusColor = useUserStatusColor(status);
+
 	const name: TIconsName = `status-${status}`;
 	const isNameValid = IconSet.hasIcon(name);
 	const iconName = isNameValid ? name : 'status-offline';
@@ -20,11 +25,11 @@ const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: I
 
 	return (
 		<CustomIcon
+			{...props}
 			style={calculatedStyle}
 			size={size}
 			name={iconName}
-			color={STATUS_COLORS[status] ?? STATUS_COLORS.offline}
-			{...props}
+			color={userStatusColor ?? colors.userPresenceOffline}
 		/>
 	);
 });

app/containers/StatusBar.tsx

@@ -21,7 +21,7 @@ const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
 			barStyle = 'dark-content';
 		}
 	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? colors.headerBackground} barStyle={barStyle} animated />;
+	return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} barStyle={barStyle} animated />;
 };
 
 export default StatusBar;

app/containers/SupportedVersions/SupportedVersionsExpired.tsx

@@ -46,19 +46,19 @@ export const SupportedVersionsExpired = () => {
 	};
 
 	return (
-		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
-			<Text style={[styles.title, { color: colors.titleText }]}>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('Supported_versions_expired_title', { workspace_name: name })}
 			</Text>
-			<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('Supported_versions_expired_description')}</Text>
+			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Supported_versions_expired_description')}</Text>
 			<Button title={I18n.t('Check_again')} type='primary' onPress={checkAgain} loading={checking} />
 			<Button
 				title={I18n.t('Learn_more')}
 				type='secondary'
-				backgroundColor={colors.chatComponentBackground}
+				backgroundColor={colors.surfaceTint}
 				onPress={() => Linking.openURL(LEARN_MORE_URL)}
 			/>
 		</View>

app/containers/SupportedVersions/SupportedVersionsWarning.tsx

@@ -31,22 +31,22 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
 			{message.title ? (
-				<Text testID='sv-warn-title' style={[styles.title, { color: colors.titleText }]}>
+				<Text testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
 					{message.title}
 				</Text>
 			) : null}
 			{message.subtitle ? (
-				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
 					{message.subtitle}
 				</Text>
 			) : null}
 			{message.description ? (
-				<Text testID='sv-warn-description' style={[styles.description, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
 					{message.description}
 				</Text>
 			) : null}
@@ -54,7 +54,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 				testID='sv-warn-button'
 				title='Learn more'
 				type='secondary'
-				backgroundColor={colors.chatComponentBackground}
+				backgroundColor={colors.surfaceTint}
 				onPress={() => Linking.openURL(message.link || LEARN_MORE_URL)}
 			/>
 		</View>

app/containers/Switch/index.tsx

@@ -0,0 +1,17 @@
+import { Switch as RNSwitch, SwitchProps } from 'react-native';
+import React from 'react';
+
+import { useTheme } from '../../theme';
+
+const Switch = (props: SwitchProps): React.ReactElement => {
+	const { colors } = useTheme();
+
+	const trackColor = {
+		false: colors.buttonBackgroundDangerPress,
+		true: colors.buttonBackgroundSuccessPress
+	};
+
+	return <RNSwitch trackColor={trackColor} {...props} />;
+};
+
+export default Switch;

app/containers/TextInput/FormTextInput.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingVertical: 10,
 		borderWidth: 1,
-		borderRadius: 4
+		borderRadius: 2
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -91,7 +91,9 @@ export const FormTextInput = ({
 	return (
 		<View style={[styles.inputContainer, containerStyle]}>
 			{label ? (
-				<Text style={[styles.label, { color: colors.titleText }, error?.error && { color: colors.dangerColor }]}>{label}</Text>
+				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
+					{label}
+				</Text>
 			) : null}
 
 			<View style={styles.wrap}>
@@ -101,13 +103,13 @@ export const FormTextInput = ({
 						iconLeft && styles.inputIconLeft,
 						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
-							backgroundColor: colors.backgroundColor,
-							borderColor: colors.separatorColor,
-							color: colors.titleText
+							backgroundColor: colors.surfaceRoom,
+							borderColor: colors.strokeLight,
+							color: colors.fontTitlesLabels
 						},
 						error?.error && {
-							color: colors.dangerColor,
-							borderColor: colors.dangerColor
+							color: colors.buttonBackgroundDangerDefault,
+							borderColor: colors.buttonBackgroundDangerDefault
 						},
 						inputStyle
 					]}
@@ -121,6 +123,7 @@ export const FormTextInput = ({
 					accessibilityLabel={placeholder}
 					placeholder={placeholder}
 					value={value}
+					placeholderTextColor={colors.fontAnnotation}
 					{...inputProps}
 				/>
 
@@ -129,14 +132,14 @@ export const FormTextInput = ({
 						name={iconLeft}
 						testID={testID ? `${testID}-icon-left` : undefined}
 						size={20}
-						color={colors.auxiliaryText}
+						color={colors.fontSecondaryInfo}
 						style={[styles.iconContainer, styles.iconLeft]}
 					/>
 				) : null}
 
 				{showClearInput ? (
 					<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
-						<CustomIcon name='input-clear' size={20} color={colors.auxiliaryTintColor} />
+						<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
 					</Touchable>
 				) : null}
 
@@ -145,7 +148,7 @@ export const FormTextInput = ({
 						name={iconRight}
 						testID={testID ? `${testID}-icon-right` : undefined}
 						size={20}
-						color={colors.bodyText}
+						color={colors.fontDefault}
 						style={[styles.iconContainer, styles.iconRight]}
 					/>
 				) : null}
@@ -156,7 +159,7 @@ export const FormTextInput = ({
 							name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
 							testID={testID ? `${testID}-icon-password` : undefined}
 							size={20}
-							color={colors.auxiliaryText}
+							color={colors.fontDefault}
 						/>
 					</Touchable>
 				) : null}
@@ -164,13 +167,13 @@ export const FormTextInput = ({
 				{loading ? (
 					<ActivityIndicator
 						style={[styles.iconContainer, styles.iconRight]}
-						color={colors.bodyText}
+						color={colors.fontDefault}
 						testID={testID ? `${testID}-loading` : undefined}
 					/>
 				) : null}
 				{left}
 			</View>
-			{error && error.reason ? <Text style={[styles.error, { color: colors.dangerColor }]}>{error.reason}</Text> : null}
+			{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
 		</View>
 	);
 };

app/containers/TextInput/TextInput.tsx

@@ -20,8 +20,8 @@ export const TextInput = React.forwardRef<RNTextInput, IThemedTextInput>(({ styl
 	return (
 		<RNTextInput
 			ref={ref}
-			style={[{ color: themes[theme].titleText }, style, styles.input]}
-			placeholderTextColor={themes[theme].auxiliaryText}
+			style={[{ color: themes[theme].fontTitlesLabels }, style, styles.input]}
+			placeholderTextColor={themes[theme].fontSecondaryInfo}
 			keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
 			{...props}
 		/>

app/containers/ThreadDetails.tsx

@@ -68,18 +68,19 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 		<View style={[styles.container, style]}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
-					<CustomIcon name='threads' size={24} color={themes[theme].auxiliaryText} />
+					<CustomIcon name='threads' size={24} />
 					<Text
 						testID={`thread-count-${count}`}
-						style={[styles.detailText, { color: themes[theme].auxiliaryText }]}
-						numberOfLines={1}>
+						style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]}
+						numberOfLines={1}
+					>
 						{count}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
-					<CustomIcon name='user' size={24} color={themes[theme].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name='user' size={24} />
+					<Text style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
 						{replies}
 					</Text>
 				</View>
@@ -87,11 +88,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 			<View style={styles.badgeContainer}>
 				{badgeColor ? <View style={[styles.badge, { backgroundColor: badgeColor }]} /> : null}
 				<Touchable onPress={() => toggleFollowThread?.(isFollowing, item.id)}>
-					<CustomIcon
-						size={24}
-						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryTintColor}
-					/>
+					<CustomIcon size={24} name={isFollowing ? 'notification' : 'notification-disabled'} />
 				</Touchable>
 			</View>
 		</View>

app/containers/Toast.tsx

@@ -45,8 +45,8 @@ const Toast = (): React.ReactElement => {
 		<EasyToast
 			ref={getToastRef}
 			position='center'
-			style={[styles.toast, { backgroundColor: colors.toastBackground }]}
-			textStyle={[styles.text, { color: colors.buttonText }]}
+			style={[styles.toast, { backgroundColor: colors.surfaceDark }]}
+			textStyle={[styles.text, { color: colors.fontWhite }]}
 			opacity={0.9}
 		/>
 	);

app/containers/Touch.tsx

@@ -17,9 +17,10 @@ const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, un
 			ref={ref}
 			onPress={onPress}
 			activeOpacity={1}
-			underlayColor={underlayColor || colors.bannerBackground}
-			rippleColor={colors.bannerBackground}
-			{...props}>
+			underlayColor={underlayColor || colors.surfaceNeutral}
+			rippleColor={colors.surfaceNeutral}
+			{...props}
+		>
 			{children}
 		</RectButton>
 	);

app/containers/TwoFactor/index.tsx

@@ -102,7 +102,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 		setData({});
 	};
 
-	const color = themes[theme].titleText;
+	const color = themes[theme].fontTitlesLabels;
 	return (
 		<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
 			<View style={styles.container} testID='two-factor'>
@@ -110,8 +110,9 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 					style={[
 						styles.content,
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-						{ backgroundColor: themes[theme].backgroundColor }
-					]}>
+						{ backgroundColor: themes[theme].surfaceHover }
+					]}
+				>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
 					<FormTextInput
@@ -135,7 +136,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 						<Button
 							title={I18n.t('Cancel')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme].surfaceTint}
 							style={styles.button}
 							onPress={onCancel}
 						/>

app/containers/UIKit/DatePicker.tsx

@@ -64,10 +64,13 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 		button = (
 			<Touchable
 				onPress={() => onShow(!show)}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
-				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
-					<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>
+				style={{ backgroundColor: themes[theme].surfaceRoom }}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			>
+				<View
+					style={[styles.input, { borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }]}
+				>
+					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>
 					{loading ? (
@@ -76,7 +79,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 						<CustomIcon
 							name='calendar'
 							size={20}
-							color={error ? themes[theme].dangerColor : themes[theme].auxiliaryText}
+							color={error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].fontSecondaryInfo}
 							style={styles.icon}
 						/>
 					)}
@@ -91,7 +94,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			display={isAndroid ? 'default' : 'inline'}
 			value={currentDate}
 			onChange={onChange}
-			textColor={themes[theme].titleText}
+			textColor={themes[theme].fontTitlesLabels}
 		/>
 	) : null;
 

app/containers/UIKit/Input.tsx

@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
 export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
 	<View style={styles.container}>
 		{label ? (
-			<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text>
+			<Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
 		) : null}
-		{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null}
+		{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
 		{parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
-		{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
-		{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
+		{error ? <Text style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</Text> : null}
+		{hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null}
 	</View>
 );

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -29,15 +29,16 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 		<Touchable
 			key={item.value}
 			onPress={() => onSelect(item)}
-			style={[styles.chip, { backgroundColor: colors.auxiliaryBackground }, style]}
-			background={Touchable.Ripple(colors.bannerBackground)}
-			testID={`multi-select-chip-${item.value}`}>
+			style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
+			testID={`multi-select-chip-${item.value}`}
+		>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
-				<Text numberOfLines={1} style={[styles.chipText, { color: colors.titleText }]}>
+				<Text numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>
 					{textParser([item.text])}
 				</Text>
-				<CustomIcon name='close' size={16} color={colors.auxiliaryText} />
+				<CustomIcon name='close' size={16} color={colors.fontSecondaryInfo} />
 			</>
 		</Touchable>
 	);

app/containers/UIKit/MultiSelect/Input.tsx

@@ -22,16 +22,16 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 	return (
 		<Touchable
 			onPress={onPress}
-			style={[{ backgroundColor: colors.backgroundColor }, styles.inputBorder, inputStyle]}
-			background={Touchable.Ripple(colors.bannerBackground)}
-			// @ts-ignore
-			disabled={disabled}>
-			<View style={[styles.input, styles.inputBorder, { borderColor: colors.separatorColor }, innerInputStyle]}>
-				{placeholder ? <Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder}</Text> : children}
+			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
+			disabled={disabled}
+		>
+			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
+				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
 				{loading ? (
 					<ActivityIndicator style={styles.icon} />
 				) : (
-					<CustomIcon name='chevron-down' size={22} color={colors.auxiliaryText} style={styles.icon} />
+					<CustomIcon name='chevron-down' size={22} color={colors.fontSecondaryInfo} style={styles.icon} />
 				)}
 			</View>
 		</Touchable>

app/containers/UIKit/MultiSelect/Items.tsx

@@ -36,11 +36,11 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 					{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 				</View>
 				<View style={styles.flex}>
-					<Text numberOfLines={1} style={{ color: colors.titleText }}>
+					<Text numberOfLines={1} style={{ color: colors.fontTitlesLabels }}>
 						{textParser([item.text])}
 					</Text>
 				</View>
-				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.tintColor} size={22} name='check' /> : null}</View>
+				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.badgeBackgroundLevel2} size={22} name='check' /> : null}</View>
 			</View>
 		</Touchable>
 	);

app/containers/UIKit/MultiSelect/MultiSelectContent.tsx

@@ -71,7 +71,7 @@ export const MultiSelectContent = React.memo(
 						testID='multi-select-search'
 						onChangeText={handleSearch}
 						placeholder={I18n.t('Search')}
-						inputStyle={{ backgroundColor: colors.focusedBackground }}
+						inputStyle={{ backgroundColor: colors.surfaceLight }}
 						bottomSheet={isIOS}
 						onSubmitEditing={() => {
 							setTimeout(() => {

app/containers/UIKit/MultiSelect/index.tsx

@@ -119,7 +119,7 @@ export const MultiSelect = React.memo(
 			<Button title={`${selected.length} selecteds`} onPress={onShow} loading={loading} />
 		) : (
 			<Input onPress={onShow} loading={loading} disabled={disabled} inputStyle={inputStyle} innerInputStyle={innerInputStyle}>
-				<Text style={[styles.pickerText, { color: currentValue ? colors.titleText : colors.auxiliaryText }]}>
+				<Text style={[styles.pickerText, { color: currentValue ? colors.fontTitlesLabels : colors.fontSecondaryInfo }]}>
 					{currentValue || placeholder.text}
 				</Text>
 			</Input>
@@ -131,7 +131,7 @@ export const MultiSelect = React.memo(
 					{selected.length ? (
 						<Chips items={selected} onSelect={(item: any) => (disabled ? {} : onSelect(item))} />
 					) : (
-						<Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder.text}</Text>
+						<Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder.text}</Text>
 					)}
 				</Input>
 			);

app/containers/UIKit/Overflow.tsx

@@ -29,8 +29,9 @@ const styles = StyleSheet.create({
 const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].bannerBackground)}
-		style={styles.option}>
+		background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+		style={styles.option}
+	>
 		<Text>{parser.text(text)}</Text>
 	</Touchable>
 );
@@ -61,12 +62,13 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 		<>
 			<Touchable
 				ref={ref => (touchable[blockId] = ref)}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
-				style={styles.menu}>
+				style={styles.menu}
+			>
 				{!loading ? (
-					<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
+					<CustomIcon size={18} name='kebab' color={themes[theme].fontDefault} />
 				) : (
 					<ActivityIndicator style={styles.loading} />
 				)}
@@ -76,7 +78,8 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 				// fromView exists in Popover Component
 				/* @ts-ignore*/
 				fromView={touchable[blockId]}
-				onRequestClose={() => onShow(false)}>
+				onRequestClose={() => onShow(false)}
+			>
 				<Options options={options} onOptionPress={onOptionPress} parser={parser} theme={theme} />
 			</Popover>
 		</>

app/containers/UIKit/Section.tsx

@@ -31,7 +31,7 @@ const Accessory = ({ element, parser }: IAccessoryComponent) =>
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
 		{fields.map(field => (
-			<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
+			<Text style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>{parser.text(field)}</Text>
 		))}
 	</>
 );

app/containers/UIKit/Select.tsx

@@ -51,8 +51,8 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 	const pickerStyle = {
 		...styles.viewContainer,
 		...(isIOS ? styles.iosPadding : {}),
-		borderColor: themes[theme].separatorColor,
-		backgroundColor: themes[theme].backgroundColor
+		borderColor: themes[theme].strokeLight,
+		backgroundColor: themes[theme].surfaceRoom
 	};
 
 	const placeholderObject = useMemo(
@@ -67,7 +67,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 		loading ? (
 			<ActivityIndicator style={styles.loading} />
 		) : (
-			<CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
+			<CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].fontSecondaryInfo} />
 		);
 
 	return (
@@ -87,7 +87,9 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 			}}
 			Icon={Icon}
 			textInputProps={{
-				style: { ...styles.pickerText, color: selected ? themes[theme].titleText : themes[theme].auxiliaryText }
+				// style property was Omitted in lib, but can be used normally
+				// @ts-ignore
+				style: { ...styles.pickerText, color: selected ? themes[theme].fontTitlesLabels : themes[theme].fontSecondaryInfo }
 			}}
 		/>
 	);

app/containers/UIKit/UiKitMessage.stories.tsx

@@ -40,8 +40,9 @@ export default {
 						onReactionPress: () => {},
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.tunreadColor
-					}}>
+						threadBadgeColor: themes.light.fontInfo
+					}}
+				>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>

app/containers/UIKit/UiKitModal.stories.tsx

@@ -42,8 +42,9 @@ export default {
 						onReactionPress: () => {},
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.tunreadColor
-					}}>
+						threadBadgeColor: themes.light.fontInfo
+					}}
+				>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx

@@ -18,20 +18,20 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
 	const iconStyle: { [key: string]: { icon: TIconsName; color: string; backgroundColor: string; label: string } } = {
 		ended: {
 			icon: 'phone-end',
-			color: colors.conferenceCallEndedPhoneIcon,
-			backgroundColor: colors.conferenceCallEndedPhoneBackground,
+			color: colors.fontSecondaryInfo,
+			backgroundColor: colors.surfaceNeutral,
 			label: i18n.t('Call_ended')
 		},
 		incoming: {
 			icon: 'phone-in',
-			color: colors.conferenceCallIncomingPhoneIcon,
-			backgroundColor: colors.conferenceCallIncomingPhoneBackground,
+			color: colors.fontInfo,
+			backgroundColor: colors.buttonBackgroundPrimaryDisabled,
 			label: i18n.t('Calling')
 		},
 		outgoing: {
 			icon: 'phone',
-			color: colors.conferenceCallOngoingPhoneIcon,
-			backgroundColor: colors.conferenceCallOngoingPhoneBackground,
+			color: colors.buttonBackgroundSuccessDefault,
+			backgroundColor: colors.buttonBackgroundSuccessDisabled,
 			label: i18n.t('Call_ongoing')
 		},
 		issue: {

app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceSkeletonLoading.tsx

@@ -7,8 +7,8 @@ export default function VideoConferenceSkeletonLoading(): React.ReactElement {
 	const { colors } = useTheme();
 
 	return (
-		<SkeletonPlaceholder backgroundColor={colors.conferenceCallBackground}>
-			<SkeletonPlaceholder.Item borderWidth={1} borderColor={colors.conferenceCallBorder} borderRadius={4} marginTop={8}>
+		<SkeletonPlaceholder backgroundColor={colors.surfaceTint}>
+			<SkeletonPlaceholder.Item borderWidth={1} borderColor={colors.surfaceHover} borderRadius={4} marginTop={8}>
 				<SkeletonPlaceholder.Item alignItems={'center'} flexDirection='row' marginTop={16} marginLeft={16}>
 					<SkeletonPlaceholder.Item width={28} height={26} />
 					<SkeletonPlaceholder.Item width={75} height={16} marginLeft={8} borderRadius={0} />

app/containers/UIKit/VideoConferenceBlock/components/styles.ts

@@ -6,13 +6,13 @@ import sharedStyles from '../../../../views/Styles';
 export default function useStyle() {
 	const { colors } = useTheme();
 	const style = StyleSheet.create({
-		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.conferenceCallBorder },
+		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceHover },
 		callInfoContainer: { flex: 1, alignItems: 'center', paddingLeft: 16, flexDirection: 'row' },
 		infoContainerText: {
 			fontSize: 12,
 			marginLeft: 8,
 			...sharedStyles.textBold,
-			color: colors.auxiliaryTintColor
+			color: colors.fontHint
 		},
 		iconContainer: {
 			width: 28,
@@ -23,7 +23,7 @@ export default function useStyle() {
 		},
 		callToActionContainer: {
 			height: 48,
-			backgroundColor: colors.conferenceCallBackground,
+			backgroundColor: colors.surfaceHover,
 			flexDirection: 'row',
 			alignItems: 'center',
 			paddingLeft: 16
@@ -31,15 +31,15 @@ export default function useStyle() {
 		callToActionButtonText: {
 			fontSize: 12,
 			...sharedStyles.textSemibold,
-			color: colors.buttonText
+			color: colors.fontWhite
 		},
 		callToActionCallBackText: {
 			fontSize: 12,
 			...sharedStyles.textSemibold,
-			color: colors.conferenceCallCallBackText
+			color: colors.surfaceDark
 		},
 		callToActionButton: {
-			backgroundColor: colors.tintColor,
+			backgroundColor: colors.badgeBackgroundLevel2,
 			minWidth: 50,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -51,13 +51,13 @@ export default function useStyle() {
 		joined: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary,
+			color: colors.fontDefault,
 			marginLeft: 8
 		},
 		plusUsers: {
 			width: 28,
 			height: 28,
-			backgroundColor: colors.conferenceCallPlusUsersButton,
+			backgroundColor: colors.surfaceNeutral,
 			borderRadius: 4,
 			alignItems: 'center',
 			justifyContent: 'center'
@@ -65,16 +65,16 @@ export default function useStyle() {
 		plusUsersText: {
 			fontSize: 14,
 			...sharedStyles.textSemibold,
-			color: colors.conferenceCallPlusUsersText,
+			color: colors.fontDefault,
 			alignSelf: 'center'
 		},
 		callBack: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.fontDefault
 		},
 		callToActionCallBack: {
-			backgroundColor: colors.conferenceCallPlusUsersButton,
+			backgroundColor: colors.surfaceSelected,
 			minWidth: 50,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -86,10 +86,10 @@ export default function useStyle() {
 		notAnswered: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		enabledBackground: {
-			backgroundColor: colors.conferenceCallEnabledIconBackground
+			backgroundColor: colors.strokeHighlight
 		}
 	});
 

app/containers/UIKit/index.tsx

@@ -62,10 +62,10 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
 			return (
-				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
+		return <Text style={[styles.text, { color: themes[theme].fontDefault }]}>{element.text}</Text>;
 	}
 
 	mrkdwn(element: IMarkdown, context: BlockContext) {
@@ -74,10 +74,10 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
 			return (
-				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
+		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {

app/containers/UnreadBadge/getUnreadStyle.test.js

@@ -15,8 +15,8 @@ const testsForTheme = theme => {
 				unread: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].unreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].fontAnnotation,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -26,8 +26,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].tunreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: theme === 'light' ? themes[theme].fontInfo : themes[theme].buttonBackgroundPrimaryPress,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -38,8 +38,8 @@ const testsForTheme = theme => {
 				userMentions: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionMeColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel4,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -50,8 +50,8 @@ const testsForTheme = theme => {
 				groupMentions: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionGroupColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel3,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -64,8 +64,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionMeColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel4,
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -74,8 +74,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionGroupColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel3,
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -83,8 +83,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].tunreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: theme === 'light' ? themes[theme].fontInfo : themes[theme].buttonBackgroundPrimaryPress,
+			color: themes[theme].fontWhite
 		});
 	});
 };