stash

app/containers/ActionSheet/ActionSheet.tsx

@@ -138,7 +138,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
+						backgroundStyle={{ backgroundColor: colors.backgroundColor }}
 						onChange={index => index === -1 && onClose()}
 						{...androidTablet}>
 						<BottomSheetContent options={data?.options} hide={hide} children={data?.children} hasCancel={data?.hasCancel} />

app/containers/ActionSheet/BottomSheetContent.tsx

@@ -24,7 +24,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: I
 		hasCancel ? (
 			<Button
 				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
+				style={[styles.button, { backgroundColor: colors.backgroundColor }]}
 				// TODO: Remove when migrate Touch
 				theme={theme}
 				accessibilityLabel={I18n.t('Cancel')}>
@@ -43,7 +43,7 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children }: I
 				keyExtractor={item => item.title}
 				bounces={true}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.focusedBackground }}
+				style={{ backgroundColor: colors.backgroundColor }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
 				contentContainerStyle={styles.content}

app/containers/ActionSheet/Item.tsx

@@ -23,7 +23,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	return (
 		<Button
 			onPress={onPress}
-			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
+			style={[styles.item, { backgroundColor: themes[theme].backgroundColor }]}
 			theme={theme}
 			testID={item.testID}>
 			<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />

app/containers/EmojiPicker/index.tsx

@@ -185,7 +185,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 						keyboardShouldPersistTaps: 'always',
 						keyboardDismissMode: 'none'
 					}}
-					style={{ backgroundColor: themes[theme].focusedBackground }}>
+					style={{ backgroundColor: themes[theme].backgroundColor }}>
 					{categories.tabs.map((tab: any, i) =>
 						i === 0 && frequentlyUsed.length === 0
 							? null // when no frequentlyUsed don't show the tab

app/containers/InAppNotification/NotifierComponent.tsx

@@ -113,7 +113,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				styles.container,
 				(isMasterDetail || isLandscape) && styles.small,
 				{
-					backgroundColor: themes[theme].focusedBackground,
+					backgroundColor: themes[theme].backgroundColor,
 					borderColor: themes[theme].separatorColor,
 					marginTop: insets.top
 				}

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].auxiliaryText }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>

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].auxiliaryText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });

app/containers/LoginServices/LoginServices.stories.js

@@ -87,7 +87,7 @@ stories.add('ServiceList', () => (
 				<ButtonService
 					key={service._id}
 					onPress={() => {}}
-					backgroundColor={colors[theme].chatComponentBackground}
+					backgroundColor={colors[theme].buttonBackgroundSecondaryDefault}
 					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/MessageActions/Header.tsx

@@ -78,7 +78,7 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => {
 		<Button
 			testID={`message-actions-emoji-${emoji}`}
 			onPress={() => onReaction({ emoji: `:${emoji}:` })}
-			style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
+			style={[styles.headerItem, { backgroundColor: themes[theme].backgroundColor }]}
 			theme={theme}>
 			{emojiModel?.isCustom ? (
 				<CustomEmoji style={styles.customEmoji} emoji={emojiModel} baseUrl={server} />
@@ -93,7 +93,7 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Button
 		testID='add-reaction'
 		onPress={onReaction}
-		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
+		style={[styles.headerItem, { backgroundColor: themes[theme].backgroundColor }]}
 		theme={theme}>
 		<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
 	</Button>
@@ -135,12 +135,12 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail }:
 	const renderFooter = () => <HeaderFooter onReaction={onReaction} theme={theme} />;
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
 			<FlatList
 				data={items}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				keyExtractor={keyExtractor}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}

app/containers/MessageBox/Mentions/FixedMentionItem.tsx

@@ -20,7 +20,7 @@ const FixedMentionItem = ({ item, onPress }: IMessageBoxFixedMentionItem) => {
 			style={[
 				styles.mentionItem,
 				{
-					backgroundColor: themes[theme].auxiliaryBackground,
+					backgroundColor: themes[theme].backgroundColor,
 					borderTopColor: themes[theme].separatorColor
 				}
 			]}

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -90,7 +90,7 @@ const MentionItem = ({ item, trackingType }: IMessageBoxMentionItem) => {
 			style={[
 				styles.mentionItem,
 				{
-					backgroundColor: themes[theme].auxiliaryBackground,
+					backgroundColor: themes[theme].backgroundColor,
 					borderTopColor: themes[theme].separatorColor
 				}
 			]}

app/containers/MessageBox/Mentions/index.tsx

@@ -25,7 +25,7 @@ const Mentions = React.memo(
 		return (
 			<View testID='messagebox-container'>
 				<FlatList
-					style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}
+					style={[styles.mentionList, { backgroundColor: themes[theme].backgroundColor }]}
 					ListHeaderComponent={() => (
 						<MentionHeaderList trackingType={trackingType} hasMentions={mentions.length > 0} loading={loading} />
 					)}

app/containers/MessageBox/ReplyPreview.tsx

@@ -65,7 +65,7 @@ const ReplyPreview = React.memo(
 		const time = moment(message.ts).format(Message_TimeFormat);
 		return (
 			<View style={[styles.container, { backgroundColor: themes[theme].messageboxBackground }]}>
-				<View style={[styles.messageContainer, { backgroundColor: themes[theme].chatComponentBackground }]}>
+				<View style={[styles.messageContainer, { backgroundColor: themes[theme].surfaceTint }]}>
 					<View style={styles.header}>
 						<Text style={[styles.username, { color: themes[theme].tintColor }]}>
 							{useRealName ? message.u?.name : message.u?.username}

app/containers/MessageBox/index.tsx

@@ -1156,7 +1156,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 						style={[
 							styles.textArea,
 							{ backgroundColor: themes[theme].messageboxBackground },
-							!recording && editing && { backgroundColor: themes[theme].chatComponentBackground }
+							!recording && editing && { backgroundColor: themes[theme].statusBackgroundWarning }
 						]}
 						testID='messagebox'>
 						{textInputAndButtons}

app/containers/RoomItem/Tag.tsx

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

app/containers/RoomItem/Touchable.tsx

@@ -224,7 +224,7 @@ const Touchable = ({
 								theme={theme}
 								testID={testID}
 								style={{
-									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
+									backgroundColor: isFocused ? colors.buttonBackgroundSecondaryDefault : colors.backgroundColor
 								}}>
 								{children}
 							</Touch>

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].backgroundColor }, style]}
 			edges={vertical ? ['right', 'left'] : undefined}
 			{...props}>
 			{children}

app/containers/ServerItem/index.tsx

@@ -28,9 +28,9 @@ 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].buttonBackgroundSecondaryPress }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
+				backgroundColor: isIOS && pressed ? themes[theme].buttonBackgroundSecondaryPress : themes[theme].backgroundColor
 			})}>
 			<View style={styles.serverItemContainer}>
 				{item.iconURL ? (

app/containers/TwoFactor/index.tsx

@@ -135,7 +135,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 						<Button
 							title={I18n.t('Cancel')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 							style={styles.button}
 							onPress={onCancel}
 						/>

app/containers/UIKit/DatePicker.tsx

@@ -63,7 +63,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			<Touchable
 				onPress={() => onShow(!show)}
 				style={{ backgroundColor: themes[theme].backgroundColor }}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
+				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}>
 				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
 					<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>
 						{currentDate.toLocaleDateString(language)}

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -29,8 +29,8 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 		<Touchable
 			key={item.value}
 			onPress={() => onSelect(item)}
-			style={[styles.chip, { backgroundColor: colors.auxiliaryBackground }, style]}
+			style={[styles.chip, { backgroundColor: colors.backgroundColor }, style]}
-			background={Touchable.Ripple(colors.bannerBackground)}>
+			background={Touchable.Ripple(colors.buttonBackgroundSecondaryPress)}>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 				<Text numberOfLines={1} style={[styles.chipText, { color: colors.titleText }]}>

app/containers/UIKit/MultiSelect/Input.tsx

@@ -23,7 +23,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 		<Touchable
 			onPress={onPress}
 			style={[{ backgroundColor: colors.backgroundColor }, inputStyle]}
-			background={Touchable.Ripple(colors.bannerBackground)}
+			background={Touchable.Ripple(colors.buttonBackgroundSecondaryPress)}
 			disabled={disabled}>
 			<View style={[styles.input, { borderColor: colors.separatorColor }, innerInputStyle]}>
 				{placeholder ? <Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder}</Text> : children}

app/containers/UIKit/MultiSelect/MultiSelectContent.tsx

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

app/containers/UIKit/Overflow.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].bannerBackground)}
+		background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 		style={styles.option}>
 		<Text>{parser.text(text)}</Text>
 	</Touchable>
@@ -61,7 +61,7 @@ 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].buttonBackgroundSecondaryPress)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
 				style={styles.menu}>

app/containers/UserItem.tsx

@@ -56,10 +56,10 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, t
 		onLongPress={onLongPress}
 		testID={testID}
 		android_ripple={{
-			color: themes[theme].bannerBackground
+			color: themes[theme].buttonBackgroundSecondaryPress
 		}}
 		style={({ pressed }: any) => ({
-			backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : 'transparent'
+			backgroundColor: isIOS && pressed ? themes[theme].buttonBackgroundSecondaryPress : 'transparent'
 		})}>
 		<View style={[styles.container, styles.button, style]}>
 			<Avatar text={username} size={30} style={styles.avatar} />

app/containers/markdown/index.tsx

@@ -159,8 +159,8 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 					{
 						...styles.codeInline,
 						color: themes[theme].bodyText,
-						backgroundColor: themes[theme].bannerBackground,
+						backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
-						borderColor: themes[theme].bannerBackground
+						borderColor: themes[theme].borderColor
 					},
 					...style
 				]}>
@@ -177,8 +177,8 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 					{
 						...styles.codeBlock,
 						color: themes[theme].bodyText,
-						backgroundColor: themes[theme].bannerBackground,
+						backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
-						borderColor: themes[theme].bannerBackground
+						borderColor: themes[theme].borderColor
 					},
 					...style
 				]}>

app/containers/markdown/new/Code.tsx

@@ -18,7 +18,7 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 			style={[
 				styles.codeBlock,
 				{
-					backgroundColor: colors.bannerBackground,
+					backgroundColor: colors.buttonBackgroundSecondaryPress,
 					borderColor: colors.borderColor
 				}
 			]}>

app/containers/markdown/new/InlineCode.tsx

@@ -19,7 +19,7 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
 				styles.codeInline,
 				{
 					color: themes[theme].bodyText,
-					backgroundColor: themes[theme].bannerBackground,
+					backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
 					borderColor: themes[theme].borderColor
 				}
 			]}>

app/containers/message/Audio.tsx

@@ -283,10 +283,7 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 					theme={theme}
 				/>
 				<View
-					style={[
+					style={[styles.audioContainer, { backgroundColor: themes[theme].surfaceTint, borderColor: themes[theme].borderColor }]}>
-						styles.audioContainer,
-						{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
-					]}>
 					<Button disabled={isReply} loading={loading} paused={paused} onPress={this.togglePlayPause} theme={theme} />
 					<Slider
 						disabled={isReply}

app/containers/message/Broadcast.tsx

@@ -21,7 +21,7 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 					hitSlop={BUTTON_HIT_SLOP}
 					testID='message-broadcast-reply'>

app/containers/message/CallButton.tsx

@@ -16,7 +16,7 @@ const CallButton = React.memo(({ callJitsi }: IMessageCallButton) => {
 		<View style={styles.buttonContainer}>
 			<Touchable
 				onPress={callJitsi}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 				style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 				hitSlop={BUTTON_HIT_SLOP}>
 				<>

app/containers/message/Components/CollapsibleQuote/index.tsx

@@ -126,7 +126,7 @@ const CollapsibleQuote = React.memo(
 
 		let {
 			borderColor,
-			chatComponentBackground: backgroundColor,
+			surfaceTint: backgroundColor,
 			collapsibleQuoteBorder,
 			collapsibleChevron,
 			headerTintColor
@@ -162,7 +162,7 @@ const CollapsibleQuote = React.memo(
 							borderLeftWidth: 2
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 					hitSlop={BUTTON_HIT_SLOP}>
 					<View style={styles.touchableContainer}>
 						<View style={styles.attachmentContainer}>

app/containers/message/Discussion.tsx

@@ -29,7 +29,7 @@ const Discussion = React.memo(
 				<View style={styles.buttonContainer}>
 					<Touchable
 						onPress={onDiscussionPress}
-						background={Touchable.Ripple(themes[theme].bannerBackground)}
+						background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 						style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
 						hitSlop={BUTTON_HIT_SLOP}>
 						<>

app/containers/message/Image.tsx

@@ -38,7 +38,7 @@ const Button = React.memo(({ children, onPress, disabled, theme }: IMessageButto
 		disabled={disabled}
 		onPress={onPress}
 		style={styles.imageContainer}
-		background={Touchable.Ripple(themes[theme].bannerBackground)}>
+		background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}>
 		{children}
 	</Touchable>
 ));

app/containers/message/Reactions.tsx

@@ -36,7 +36,7 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			key='message-add-reaction'
 			testID='message-add-reaction'
 			style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
+			background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
 				<CustomIcon name='reaction-add' size={21} color={themes[theme].tintColor} />
@@ -56,9 +56,9 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[
 				styles.reactionButton,
-				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }
+				{ backgroundColor: reacted ? themes[theme].buttonBackgroundSecondaryPress : themes[theme].backgroundColor }
 			]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
+			background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 			hitSlop={BUTTON_HIT_SLOP}>
 			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>
 				<Emoji

app/containers/message/Reply.tsx

@@ -245,7 +245,7 @@ const Reply = React.memo(
 							borderColor
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}
 					disabled={loading}>
 					<View style={styles.attachmentContainer}>
 						<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
@@ -264,7 +264,10 @@ const Reply = React.memo(
 								<View
 									style={[
 										styles.backdrop,
-										{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
+										{
+											backgroundColor: themes[theme].buttonBackgroundSecondaryPress,
+											opacity: themes[theme].attachmentLoadingOpacity
+										}
 									]}></View>
 								<RCActivityIndicator />
 							</View>

app/containers/message/Urls.tsx

@@ -116,11 +116,11 @@ const Url = React.memo(
 					index > 0 && styles.marginTop,
 					styles.container,
 					{
-						backgroundColor: themes[theme].chatComponentBackground,
+						backgroundColor: themes[theme].surfaceTint,
 						borderColor: themes[theme].borderColor
 					}
 				]}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
+				background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}>
 				<>
 					<UrlImage image={url.image} />
 					<UrlContent title={url.title} description={url.description} theme={theme} />

app/containers/message/Video.tsx

@@ -89,7 +89,7 @@ const Video = React.memo(
 					disabled={isReply}
 					onPress={onPress}
 					style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}>
+					background={Touchable.Ripple(themes[theme].buttonBackgroundSecondaryPress)}>
 					{loading ? <RCActivityIndicator /> : <CustomIcon name='play-filled' size={54} color={themes[theme].buttonText} />}
 				</Touchable>
 			</>

app/lib/constants/colors.ts

@@ -21,26 +21,30 @@ const mentions = {
 
 export const colors = {
 	light: {
-		backgroundColor: '#ffffff',
+		backgroundColor: '#ffffff', // surface-light
-		focusedBackground: '#ffffff',
+		// focusedBackground: '#ffffff', // removed in favor of backgroundColor
-		chatComponentBackground: '#f3f4f5',
+		chatComponentBackground: 'red',
-		auxiliaryBackground: '#efeff4',
+		surfaceTint: '#F7F8FA',
-		bannerBackground: '#f1f2f4',
+		buttonBackgroundSecondaryDefault: '#E4E7EA',
-		titleText: '#0d0e12',
+		buttonBackgroundSecondaryPress: '#9EA2A8',
-		bodyText: '#2f343d',
+		statusBackgroundWarning: '#FFECAD',
-		backdropColor: '#000000',
+		// auxiliaryBackground: '#efeff4', // removed in favor of backgroundColor
-		dangerColor: '#f5455c',
+		// bannerBackground: '#f1f2f4', // removed in favor of buttonBackgroundSecondaryPress
-		successColor: '#2de0a5',
+		titleText: '#1F2329', // fontTitleLabels
-		borderColor: '#e1e5e8',
+		bodyText: '#2F343D', // fontDefault
-		controlText: '#54585e',
+		auxiliaryText: '#6C727A', // fontSecondaryInfo
-		auxiliaryText: '#9ca2a8',
+		// controlText: '#54585e', // removed in favor of auxiliaryText
-		infoText: '#6d6d72',
+		// infoText: '#6d6d72', // removed in favor of auxiliaryText
-		tintColor: '#1d74f5',
+		separatorColor: '#CBCED1', // strokeLight
-		tintActive: '#549df9',
+		tintColor: '#156FF5', // buttonBackgroundPrimaryDefault
+		// tintColor: '#549df9', // removed in favor of tintColor
 		tintDisabled: '#88B4F5',
 		auxiliaryTintColor: '#6C727A',
 		actionTintColor: '#1d74f5',
-		separatorColor: '#cbcbcc',
+		backdropColor: '#000000',
+		dangerColor: '#f5455c',
+		successColor: '#2de0a5',
+		borderColor: '#9EA2A8', // strokeMedium
 		navbarBackground: '#ffffff',
 		headerBorder: '#B2B2B2',
 		headerBackground: '#EEEFF1',
@@ -88,7 +92,7 @@ export const colors = {
 		auxiliaryText: '#9297a2',
 		infoText: '#6D6D72',
 		tintColor: '#1d74f5',
-		tintActive: '#549df9',
+		tintColor: '#549df9',
 		tintDisabled: '#88B4F5',
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1d74f5',
@@ -140,7 +144,7 @@ export const colors = {
 		auxiliaryText: '#b2b8c6',
 		infoText: '#6d6d72',
 		tintColor: '#1e9bfe',
-		tintActive: '#76b7fc',
+		tintColor: '#76b7fc',
 		tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1e9bfe',

app/lib/methods/helpers/touch.tsx

@@ -30,8 +30,8 @@ class Touch extends React.Component<ITouchProps> {
 				ref={this.getRef}
 				onPress={onPress}
 				activeOpacity={1}
-				underlayColor={underlayColor || themes[theme].bannerBackground}
+				underlayColor={underlayColor || themes[theme].buttonBackgroundSecondaryPress}
-				rippleColor={themes[theme].bannerBackground}
+				rippleColor={themes[theme].buttonBackgroundSecondaryPress}
 				{...props}>
 				{children}
 			</RectButton>

app/views/AddExistingChannelView.tsx

@@ -150,7 +150,7 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
 	renderHeader = () => {
 		const { theme } = this.props;
 		return (
-			<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
+			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='add-existing-channel-view-search' />
 			</View>
 		);

app/views/CannedResponsesListView/CannedResponseItem.tsx

@@ -39,7 +39,7 @@ const CannedResponseItem = ({
 					title={I18n.t('Use')}
 					fontSize={12}
 					color={themes[theme].titleText}
-					style={[styles.cannedUseButton, { backgroundColor: themes[theme].chatComponentBackground }]}
+					style={[styles.cannedUseButton, { backgroundColor: themes[theme].buttonBackgroundSecondaryDefault }]}
 					onPress={onPressUse}
 				/>
 			</View>

app/views/CloseLivechatView.tsx

@@ -73,7 +73,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.auxiliaryBackground }}
+			style={{ backgroundColor: colors.backgroundColor }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}>
 			<ScrollView {...scrollPersistTaps} style={styles.container}>

app/views/CreateChannelView.tsx

@@ -355,7 +355,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 					styles.list,
 					sharedStyles.separatorVertical,
 					{
-						backgroundColor: themes[theme].focusedBackground,
+						backgroundColor: themes[theme].backgroundColor,
 						borderColor: themes[theme].separatorColor
 					}
 				]}
@@ -373,7 +373,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				contentContainerStyle={[sharedStyles.container, styles.container]}
 				keyboardVerticalOffset={128}>
 				<StatusBar />

app/views/CreateDiscussionView/index.tsx

@@ -149,7 +149,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 		const { server, user, loading, blockUnauthenticatedAccess, theme, serverVersion } = this.props;
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				contentContainerStyle={styles.container}
 				keyboardVerticalOffset={128}>
 				<StatusBar />

app/views/DirectoryView/Options.tsx

@@ -119,10 +119,10 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 							<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].separatorColor }]} />
 							<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
 								<View style={styles.globalUsersTextContainer}>
-									<Text style={[styles.dropdownItemText, { color: themes[theme].infoText }]}>
+									<Text style={[styles.dropdownItemText, { color: themes[theme].auxiliaryText }]}>
 										{I18n.t('Search_global_users')}
 									</Text>
-									<Text style={[styles.dropdownItemDescription, { color: themes[theme].infoText }]}>
+									<Text style={[styles.dropdownItemDescription, { color: themes[theme].auxiliaryText }]}>
 										{I18n.t('Search_global_users_description')}
 									</Text>
 								</View>

app/views/E2EEncryptionSecurityView.tsx

@@ -174,7 +174,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 								onPress={this.resetOwnKey}
 								title={I18n.t('E2E_encryption_reset_button')}
 								type='secondary'
-								backgroundColor={themes[theme].chatComponentBackground}
+								backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 								testID='e2e-encryption-security-view-reset-key'
 							/>
 						</List.Section>

app/views/E2ESaveYourPasswordView.tsx

@@ -142,7 +142,7 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 							<Text style={[styles.password, { color: themes[theme].bodyText }]}>{password}</Text>
 							<Button
 								onPress={this.onCopy}
-								style={[styles.copyButton, { backgroundColor: themes[theme].auxiliaryBackground }]}
+								style={[styles.copyButton, { backgroundColor: themes[theme].backgroundColor }]}
 								title={I18n.t('Copy')}
 								type='secondary'
 								fontSize={12}
@@ -151,7 +151,7 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
 						<Button
 							onPress={this.onHowItWorks}
-							style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+							style={{ backgroundColor: themes[theme].backgroundColor }}
 							title={I18n.t('How_It_Works')}
 							type='secondary'
 							testID='e2e-save-password-view-how-it-works'

app/views/ForwardLivechatView.tsx

@@ -149,7 +149,7 @@ const ForwardLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamL
 	};
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.auxiliaryBackground }]}>
+		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
 			<Input onPress={onPressDepartment} placeholder={I18n.t('Select_a_Department')} />
 			<OrSeparator theme={theme} />
 			<Input onPress={onPressUser} placeholder={I18n.t('Select_a_User')} />

app/views/InviteUsersView/index.tsx

@@ -86,10 +86,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 
 	return (
 		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
-			<ScrollView
+			<ScrollView {...scrollPersistTaps} style={{ backgroundColor: colors.backgroundColor }} showsVerticalScrollIndicator={false}>
-				{...scrollPersistTaps}
-				style={{ backgroundColor: colors.auxiliaryBackground }}
-				showsVerticalScrollIndicator={false}>
 				<StatusBar />
 				<View style={styles.innerContainer}>
 					<FormTextInput label={I18n.t('Invite_Link')} value={invite && invite.url} editable={false} />

app/views/LivechatEditView.tsx

@@ -178,7 +178,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+			style={{ backgroundColor: themes[theme].backgroundColor }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}>
 			<ScrollView {...scrollPersistTaps} style={styles.container}>

app/views/ModalBlockView.tsx

@@ -255,7 +255,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 
 		return (
 			<KeyboardAwareScrollView
-				style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
+				style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
 				keyboardShouldPersistTaps='always'>
 				<View style={styles.content}>
 					{React.createElement(

app/views/NewMessageView.tsx

@@ -223,7 +223,7 @@ class NewMessageView extends React.Component<INewMessageViewProps, INewMessageVi
 		const { permissions } = this.state;
 
 		return (
-			<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
+			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='new-message-view-search' />
 				<View style={styles.buttonContainer}>
 					{permissions[0] || permissions[1]

app/views/NewServerView/index.tsx

@@ -351,7 +351,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[
 							styles.subtitle,
 							{
-								color: themes[theme].controlText,
+								color: themes[theme].auxiliaryText,
 								fontSize: moderateScale({ size: 16, width }),
 								marginBottom: verticalScale({ size: 30, height })
 							}
@@ -391,7 +391,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 					<Button
 						title={I18n.t('Join_our_open_workspace')}
 						type='secondary'
-						backgroundColor={themes[theme].chatComponentBackground}
+						backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 						onPress={this.connectOpen}
 						disabled={connecting}
 						loading={connectingOpen && connecting}

app/views/ProfileView/index.tsx

@@ -532,7 +532,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				style={{ backgroundColor: themes[theme].backgroundColor }}
 				contentContainerStyle={sharedStyles.container}
 				keyboardVerticalOffset={128}>
 				<StatusBar />
@@ -638,7 +638,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 						<Button
 							title={I18n.t('Logout_from_other_logged_in_locations')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 							onPress={this.logoutOtherLocations}
 							testID='profile-view-logout-other-locations'
 						/>

app/views/ReadReceiptView/index.tsx

@@ -105,9 +105,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 			return null;
 		}
 		return (
-			<View
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]} testID='read-receipt-view'>
-				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
-				testID='read-receipt-view'>
 				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
@@ -155,7 +153,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 					style={[
 						styles.list,
 						{
-							backgroundColor: themes[theme].chatComponentBackground,
+							backgroundColor: themes[theme].backgroundColor,
 							borderColor: themes[theme].separatorColor
 						}
 					]}

app/views/RoomInfoView/Direct.tsx

@@ -13,18 +13,20 @@ const Roles = ({ roles }: { roles?: string[] }) => {
 	const { theme } = useTheme();
 
 	if (roles && roles.length) {
-		<View style={styles.item}>
+		return (
-			<Text style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t('Roles')}</Text>
+			<View style={styles.item}>
-			<View style={styles.rolesContainer}>
+				<Text style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t('Roles')}</Text>
-				{roles.map(role =>
+				<View style={styles.rolesContainer}>
-					role ? (
+					{roles.map(role =>
-						<View style={[styles.roleBadge, { backgroundColor: themes[theme].chatComponentBackground }]} key={role}>
+						role ? (
-							<Text style={[styles.role, { color: themes[theme].titleText }]}>{role}</Text>
+							<View style={[styles.roleBadge, { backgroundColor: themes[theme].buttonBackgroundSecondaryDefault }]} key={role}>
-						</View>
+								<Text style={[styles.role, { color: themes[theme].titleText }]}>{role}</Text>
-					) : null
+							</View>
-				)}
+						) : null
+					)}
+				</View>
 			</View>
-		</View>;
+		);
 	}
 
 	return null;

app/views/RoomInfoView/index.tsx

@@ -361,7 +361,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		return (
 			<Avatar text={room.name || roomUser.username} style={styles.avatar} type={this.t} size={100} rid={room?.rid}>
 				{this.t === SubscriptionType.DIRECT && roomUser._id ? (
-					<View style={[sharedStyles.status, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+					<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
 						<Status size={20} id={roomUser._id} />
 					</View>
 				) : null}
@@ -425,7 +425,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
 				<StatusBar />
 				<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-info-view'>
-					<View style={[styles.avatarContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+					<View style={[styles.avatarContainer, { backgroundColor: themes[theme].backgroundColor }]}>
 						{this.renderAvatar(room, roomUserParsed)}
 						<View style={styles.roomTitleContainer}>
 							{renderRoomTitle({

app/views/RoomMembersView/index.tsx

@@ -339,7 +339,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isOwner ? 'action-sheet-set-owner-checked' : 'action-sheet-set-owner-unchecked'}
 						name={isOwner ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isOwner ? themes[theme].tintActive : themes[theme].auxiliaryTintColor}
+						color={isOwner ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
 					/>
 				),
 				testID: 'action-sheet-set-owner'
@@ -359,7 +359,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isLeader ? 'action-sheet-set-leader-checked' : 'action-sheet-set-leader-unchecked'}
 						name={isLeader ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isLeader ? themes[theme].tintActive : themes[theme].auxiliaryTintColor}
+						color={isLeader ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
 					/>
 				),
 				testID: 'action-sheet-set-leader'
@@ -379,7 +379,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isModerator ? 'action-sheet-set-moderator-checked' : 'action-sheet-set-moderator-unchecked'}
 						name={isModerator ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isModerator ? themes[theme].tintActive : themes[theme].auxiliaryTintColor}
+						color={isModerator ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
 					/>
 				),
 				testID: 'action-sheet-set-moderator'

app/views/RoomView/Banner.tsx

@@ -27,7 +27,7 @@ const Banner = React.memo(
 			return (
 				<>
 					<BorderlessButton
-						style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
+						style={[styles.bannerContainer, { backgroundColor: themes[theme].buttonBackgroundSecondaryPress }]}
 						testID='room-view-banner'
 						onPress={toggleModal}>
 						<MarkdownPreview msg={text} style={[styles.bannerText]} />
@@ -42,7 +42,7 @@ const Banner = React.memo(
 						isVisible={showModal}
 						animationIn='fadeIn'
 						animationOut='fadeOut'>
-						<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
+						<View style={[styles.modalView, { backgroundColor: themes[theme].buttonBackgroundSecondaryPress }]}>
 							<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
 							<ScrollView style={styles.modalScrollView}>
 								<Markdown msg={text} theme={theme} />

app/views/RoomView/JoinCode.tsx

@@ -104,7 +104,7 @@ const JoinCode = React.memo(
 								title={I18n.t('Cancel')}
 								type='secondary'
 								style={styles.button}
-								backgroundColor={themes[theme].chatComponentBackground}
+								backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 								testID='join-code-cancel'
 								onPress={hide}
 							/>

app/views/RoomView/UploadProgress.tsx

@@ -211,7 +211,7 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 					styles.item,
 					index !== 0 ? { marginTop: 10 } : {},
 					{
-						backgroundColor: themes[theme!].chatComponentBackground,
+						backgroundColor: themes[theme!].surfaceTint,
 						borderColor: themes[theme!].borderColor
 					}
 				]}>

app/views/RoomsListView/ListHeader/index.tsx

@@ -37,7 +37,7 @@ const ListHeader = React.memo(
 									: 'Save_Your_Encryption_Password'
 							}
 							left={() => <List.Icon name='encrypted' color={themes[theme].buttonText} />}
-							underlayColor={themes[theme].tintActive}
+							underlayColor={themes[theme].tintColor}
 							backgroundColor={themes[theme].actionTintColor}
 							color={themes[theme].buttonText}
 							onPress={goEncryption}

app/views/RoomsListView/index.tsx

@@ -983,7 +983,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		const { theme } = this.props;
 		return (
 			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].backgroundColor }]}>
-				<Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text>
+				<Text style={[styles.groupTitle, { color: themes[theme].auxiliaryText }]}>{I18n.t(header)}</Text>
 			</View>
 		);
 	};

app/views/SelectListView.tsx

@@ -62,7 +62,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		super(props);
 		const data = props.route?.params?.data;
 		this.title = props.route?.params?.title;
-		this.infoText = props.route?.params?.infoText ?? '';
+		this.auxiliaryText = props.route?.params?.auxiliaryText ?? '';
 		this.nextAction = props.route?.params?.nextAction;
 		this.showAlert = props.route?.params?.showAlert ?? (() => {});
 		this.isSearch = props.route?.params?.isSearch ?? false;
@@ -102,7 +102,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		const { theme } = this.props;
 		return (
 			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
+				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.auxiliaryText)}</Text>
 			</View>
 		);
 	};
@@ -110,7 +110,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	renderSearch = () => {
 		const { theme } = this.props;
 		return (
-			<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
+			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<SearchBox onChangeText={(text: string) => this.search(text)} testID='select-list-view-search' />
 			</View>
 		);
@@ -182,7 +182,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					testID={`select-list-view-item-${item.name}`}
 					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
 					alert={item.alert}
-					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
+					left={() => <List.Icon name={icon} color={themes[theme].auxiliaryText} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
 				/>
 			</>

app/views/SetUsernameView.tsx

@@ -107,7 +107,7 @@ class SetUsernameView extends React.Component<ISetUsernameViewProps, ISetUsernam
 		const { username, saving } = this.state;
 		const { theme } = this.props;
 		return (
-			<KeyboardView style={{ backgroundColor: themes[theme].auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
+			<KeyboardView style={{ backgroundColor: themes[theme].backgroundColor }} contentContainerStyle={sharedStyles.container}>
 				<StatusBar />
 				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 					<SafeAreaView testID='set-username-view'>

app/views/ShareListView/index.tsx

@@ -347,7 +347,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 
 		return (
 			<>
-				<View style={[styles.headerContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+				<View style={[styles.headerContainer, { backgroundColor: themes[theme].backgroundColor }]}>
 					<Text style={[styles.headerText, { color: themes[theme].titleText }]}>{I18n.t(header)}</Text>
 				</View>
 				<List.Separator />
@@ -399,7 +399,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 	renderEmptyComponent = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+			<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].backgroundColor }]}>
 				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
 			</View>
 		);
@@ -450,7 +450,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 				<FlatList
 					data={searching ? searchResults : chats}
 					keyExtractor={keyExtractor}
-					style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
+					style={[styles.flatlist, { backgroundColor: themes[theme].backgroundColor }]}
 					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
 					renderItem={this.renderItem}
 					getItemLayout={getItemLayout}

app/views/ShareView/Preview.tsx

@@ -48,7 +48,7 @@ interface IIconPreview {
 
 const IconPreview = React.memo(({ iconName, title, description, theme, width, height, danger }: IIconPreview) => (
 	<ScrollView
-		style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+		style={{ backgroundColor: themes[theme].backgroundColor }}
 		contentContainerStyle={[styles.fileContainer, { width, height }]}>
 		<CustomIcon name={iconName} size={56} color={danger ? themes[theme].dangerColor : themes[theme].tintColor} />
 		<Text style={[styles.fileName, { color: themes[theme].titleText }]}>{title}</Text>

app/views/ShareView/Thumbs.tsx

@@ -120,11 +120,11 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
 			<ThumbContent item={item} theme={theme} isShareExtension={isShareExtension} />
 			<RectButton
 				hitSlop={BUTTON_HIT_SLOP}
-				style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].auxiliaryBackground }]}
+				style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].backgroundColor }]}
 				activeOpacity={1}
-				rippleColor={themes[theme].bannerBackground}
+				rippleColor={themes[theme].buttonBackgroundSecondaryPress}
 				onPress={() => onRemove(item)}>
-				<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
+				<View style={[styles.removeView, { borderColor: themes[theme].backgroundColor }]}>
 					<CustomIcon name='close' color={themes[theme].backgroundColor} size={14} />
 				</View>
 			</RectButton>

app/views/ShareView/index.tsx

@@ -331,7 +331,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		return (
 			<FormTextInput
 				containerStyle={styles.inputContainer}
-				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]}
+				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].backgroundColor }]}
 				placeholder=''
 				onChangeText={this.onChangeText}
 				defaultValue=''

app/views/SidebarView/index.tsx

@@ -239,12 +239,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={isMasterDetail}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].backgroundColor }} vertical={isMasterDetail}>
 				<ScrollView
 					style={[
 						styles.container,
 						{
-							backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].focusedBackground
+							backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].backgroundColor
 						}
 					]}
 					{...scrollPersistTaps}>

app/views/TeamChannelsView.tsx

@@ -434,7 +434,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 		} = this.props;
 		const isAutoJoinChecked = item.teamDefault;
 		const autoJoinIcon = isAutoJoinChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintActive : themes[theme].auxiliaryTintColor;
+		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintColor : themes[theme].auxiliaryTintColor;
 
 		const options: TActionSheetOptionsItem[] = [];
 

app/views/WorkspaceView/index.tsx

@@ -87,7 +87,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 						<Button
 							title={I18n.t('Create_account')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme].buttonBackgroundSecondaryDefault}
 							onPress={this.register}
 							testID='workspace-view-register'
 						/>

ios/Podfile.lock

@@ -164,6 +164,7 @@ PODS:
   - GoogleUtilities/UserDefaults (6.7.2):
     - GoogleUtilities/Logger
   - hermes-engine (0.7.2)
+  - iosMath (0.9.4)
   - JitsiMeetSDK (3.6.0)
   - KeyCommands (2.0.3):
     - React
@@ -549,6 +550,8 @@ PODS:
     - TOCropViewController
   - RNLocalize (2.1.1):
     - React-Core
+  - RNMathView (1.0.0):
+    - iosMath
   - RNReanimated (2.2.2):
     - DoubleConversion
     - FBLazyVector
@@ -712,6 +715,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNLocalize (from `../node_modules/react-native-localize`)
+  - RNMathView (from `../node_modules/react-native-math-view/ios`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNRootView (from `../node_modules/rn-root-view`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -747,6 +751,7 @@ SPEC REPOS:
     - GoogleDataTransportCCTSupport
     - GoogleUtilities
     - hermes-engine
+    - iosMath
     - libevent
     - libwebp
     - MMKV
@@ -914,6 +919,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-image-crop-picker"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
+  RNMathView:
+    :path: "../node_modules/react-native-math-view/ios"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNRootView:
@@ -948,7 +955,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BugsnagReactNative: a97b3132c1854fd7bf92350fabd505e3ebdd7829
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   EXAppleAuthentication: e8c537fcbe80670dd76fde7a07acb94af70ada00
   EXAV: 67bcc1d0afeb1fab854b206c84b9f2afbd61d0cd
   EXConstants: 4cb52b6d8f636c767104a44bf7db3873e9c01a6f
@@ -961,7 +968,7 @@ SPEC CHECKSUMS:
   EXVideoThumbnails: 442c3abadb51a81551a3b53705b7560de390e6f7
   EXWebBrowser: 76783ba5dcb8699237746ecf41a9643d428a4cc5
   FBLazyVector: c9b6dfcde9b3d497793c40d4ccbfbfb05092e0df
-  FBReactNativeSpec: c39f7fc0cd6cc64f0a2a5beffc64b1aa5d42740e
+  FBReactNativeSpec: 374adeb438e171d9ad5d228e308789d3b2b1d35d
   Firebase: 919186c8e119dd9372a45fd1dd17a8a942bc1892
   FirebaseAnalytics: 5fa308e1b13f838d0f6dc74719ac2a72e8c5afc4
   FirebaseCore: 8cd4f8ea22075e0ee582849b1cf79d8816506085
@@ -975,12 +982,13 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
   GoogleAppMeasurement: 8cd1f289d60e629cf16ab03363b9e89c776b9651
   GoogleDataTransport: 9a8a16f79feffc7f42096743de2a7c4815e84020
   GoogleDataTransportCCTSupport: 489c1265d2c85b68187a83a911913d190012158d
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
   hermes-engine: 7d97ba46a1e29bacf3e3c61ecb2804a5ddd02d4f
+  iosMath: f7a6cbadf9d836d2149c2a84c435b1effc244cba
   JitsiMeetSDK: 476329f72a866f714d2802bafe1729de6d644ccf
   KeyCommands: f66c535f698ed14b3d3a4e58859d79a827ea907e
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
@@ -1049,6 +1057,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
   RNImageCropPicker: 97289cd94fb01ab79db4e5c92938be4d0d63415d
   RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b
+  RNMathView: 4c8a3c081fa671ab3136c51fa0bdca7ffb708bd5
   RNReanimated: 241c586663f44f19a53883c63375fdd041253960
   RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494
   RNScreens: fd535547baa4ef8aeaee1a8b1e3ffd17b8df44a4
@@ -1068,4 +1077,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 9a08139598e951c19d2daf7ac39687272634d547
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.11.2

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -846,6 +846,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/iosMath/mathFonts.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -868,6 +869,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/mathFonts.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -900,6 +902,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/iosMath/mathFonts.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -922,6 +925,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/mathFonts.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -1121,6 +1125,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/iosMath/mathFonts.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -1143,6 +1148,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/mathFonts.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -1221,6 +1227,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/iosMath/mathFonts.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -1243,6 +1250,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/mathFonts.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;