feat: replace colors from theme with semantics

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { StyleSheet, Text, View } from 'react-native';
 
@@ -7,6 +7,7 @@ import { Channel } from 'stream-chat';
 import { AIStates, useAIState } from './hooks/useAIState';
 
 import { useChannelContext, useTheme, useTranslationContext } from '../../contexts';
+import { primitives } from '../../theme';
 
 export type AITypingIndicatorViewProps = {
   channel?: Channel;
@@ -24,22 +25,39 @@ export const AITypingIndicatorView = ({
     [AIStates.Generating]: t('Generating...'),
   };
 
-  const {
-    theme: {
-      aiTypingIndicatorView: { container, text },
-      colors: { black, grey_gainsboro },
-    },
-  } = useTheme();
+  const styles = useStyles();
 
   return aiState in allowedStates ? (
-    <View style={[styles.container, { backgroundColor: grey_gainsboro }, container]}>
-      <Text style={[{ color: black }, text]}>{allowedStates[aiState]}</Text>
+    <View style={styles.container}>
+      <Text style={styles.text}>{allowedStates[aiState]}</Text>
     </View>
   ) : null;
 };
 
 AITypingIndicatorView.displayName = 'AITypingIndicatorView{messageSimple{content}}';
 
-const styles = StyleSheet.create({
-  container: { paddingHorizontal: 16, paddingVertical: 18 },
-});
+const useStyles = () => {
+  const {
+    theme: {
+      aiTypingIndicatorView: { container, text },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        backgroundColor: semantics.backgroundCoreSurface,
+        paddingHorizontal: primitives.spacingMd,
+        paddingVertical: primitives.spacingLg,
+        ...container,
+      },
+      text: {
+        color: semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightNormal,
+        ...text,
+      },
+    });
+  }, [container, text, semantics]);
+};

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -248,6 +248,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       headerText: {
+        color: semantics.chatTextOutgoing,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
@@ -22,6 +22,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
     <View style={[styles.container, container]}>
@@ -38,19 +39,20 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ queryText }) => {
   const {
     theme: {
-      colors: { accent_blue, grey },
       messageInput: {
         suggestions: {
           header: { container, title },
         },
       },
+      semantics,
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
     <View style={[styles.container, container]}>
-      <Smile pathFill={accent_blue} />
-      <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>
+      <Smile pathFill={semantics.accentPrimary} />
+      <Text style={[styles.title, title]} testID='emojis-header-title'>
         {`Emoji matching "${queryText}"`}
       </Text>
     </View>
@@ -102,16 +104,24 @@ export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeader
 AutoCompleteSuggestionHeader.displayName =
   'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    padding: 8,
-  },
-  title: {
-    fontSize: primitives.typographyFontSizeSm,
-    lineHeight: primitives.typographyLineHeightNormal,
-    fontWeight: primitives.typographyFontWeightMedium,
-    paddingLeft: 8,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        padding: 8,
+      },
+      title: {
+        fontSize: primitives.typographyFontSizeSm,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightMedium,
+        paddingLeft: 8,
+        color: semantics.textSecondary,
+      },
+    });
+  }, [semantics]);
+};

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -21,7 +21,6 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      colors: { black },
       messageInput: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
@@ -35,7 +34,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
     <View style={[styles.container, mentionContainer]}>
       <UserAvatar user={item} size='md' showOnlineIndicator={online} />
       <View style={[styles.column, column]}>
-        <Text style={[styles.name, { color: black }, nameStyle]} testID='mentions-item-name'>
+        <Text style={[styles.name, nameStyle]} testID='mentions-item-name'>
           {name || id}
         </Text>
       </View>
@@ -47,7 +46,6 @@ export const EmojiSuggestionItem = (item: Emoji) => {
   const { native, name } = item;
   const {
     theme: {
-      colors: { black },
       messageInput: {
         suggestions: {
           emoji: { container: emojiContainer, text },
@@ -59,10 +57,10 @@ export const EmojiSuggestionItem = (item: Emoji) => {
 
   return (
     <View style={[styles.container, emojiContainer]}>
-      <Text style={[styles.text, { color: black }, text]} testID='emojis-item-unicode'>
+      <Text style={[styles.text, text]} testID='emojis-item-unicode'>
         {native}
       </Text>
-      <Text style={[styles.text, { color: black }, text]} testID='emojis-item-name'>
+      <Text style={[styles.text, text]} testID='emojis-item-name'>
         {` ${name}`}
       </Text>
     </View>
@@ -217,7 +215,10 @@ const useStyles = () => {
           fontWeight: '600',
         },
         text: {
-          fontSize: 14,
+          fontSize: primitives.typographyFontSizeMd,
+          fontWeight: primitives.typographyFontWeightRegular,
+          color: semantics.textPrimary,
+          lineHeight: primitives.typographyLineHeightNormal,
         },
         title: {
           fontSize: primitives.typographyFontSizeMd,

package/src/components/Channel/Channel.tsx

@@ -99,6 +99,7 @@ import {
   ChannelUnreadStateStoreType,
 } from '../../state-store/channel-unread-state';
 import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
@@ -232,10 +233,6 @@ export type MarkReadFunctionOptions = {
   updateChannelUnreadState?: boolean;
 };
 
-const styles = StyleSheet.create({
-  selectChannel: { fontWeight: 'bold', padding: 16 },
-});
-
 export const reactionData: ReactionData[] = [
   {
     Icon: ({ size = 12 }: { size?: number }) => <Emoji item={'👍'} size={size} />,
@@ -794,12 +791,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       ? DefaultStopMessageStreamingButton
       : StopMessageStreamingButtonOverride;
 
-  const {
-    theme: {
-      channel: { selectChannel },
-      colors: { black },
-    },
-  } = useTheme();
+  const styles = useStyles();
   const [deleted, setDeleted] = useState<boolean>(false);
   const [error, setError] = useState<Error | boolean>(false);
   const [lastRead, setLastRead] = useState<Date | undefined>();
@@ -2080,7 +2072,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   if (!channel?.cid || !channel.watch) {
     return (
-      <Text style={[styles.selectChannel, { color: black }, selectChannel]} testID='no-channel'>
+      <Text style={styles.selectChannel} testID='no-channel'>
         {t('Please select a channel first')}
       </Text>
     );
@@ -2173,3 +2165,24 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
     />
   );
 };
+
+const useStyles = () => {
+  const {
+    theme: {
+      channel: { selectChannel },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      selectChannel: {
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        padding: primitives.spacingMd,
+        color: semantics.textPrimary,
+        ...selectChannel,
+      },
+    });
+  }, [selectChannel, semantics]);
+};

package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx

@@ -1,41 +1,21 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { GestureResponderEvent, StyleSheet, Text, TouchableOpacity } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 3,
-    width: '100%',
-  },
-  errorText: {
-    fontSize: 12,
-    padding: 3,
-  },
-});
+import { primitives } from '../../theme';
 
 export type HeaderErrorProps = {
   onPress?: (event: GestureResponderEvent) => void;
 };
 
 export const ChannelListHeaderErrorIndicator = ({ onPress = () => null }: HeaderErrorProps) => {
-  const {
-    theme: {
-      channelListHeaderErrorIndicator: { container, errorText },
-      colors: { grey_dark, white },
-    },
-  } = useTheme();
+  const styles = useStyles();
   const { t } = useTranslationContext();
 
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[styles.container, { backgroundColor: `${grey_dark}E6` }, container]}
-    >
-      <Text style={[styles.errorText, { color: white }, errorText]} testID='channel-loading-error'>
+    <TouchableOpacity onPress={onPress} style={styles.container}>
+      <Text style={styles.errorText} testID='channel-loading-error'>
         {t('Error while loading, please reload/refresh')}
       </Text>
     </TouchableOpacity>
@@ -44,3 +24,32 @@ export const ChannelListHeaderErrorIndicator = ({ onPress = () => null }: Header
 
 ChannelListHeaderErrorIndicator.displayName =
   'ChannelListHeaderErrorIndicator{channelListHeaderErrorIndicator}';
+
+const useStyles = () => {
+  const {
+    theme: {
+      channelListHeaderErrorIndicator: { container, errorText },
+      semantics,
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        backgroundColor: semantics.backgroundCoreSurface,
+        paddingVertical: primitives.spacingXs,
+        paddingHorizontal: primitives.spacingSm,
+        ...container,
+      },
+      errorText: {
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightTight,
+        color: semantics.chatTextSystem,
+        ...errorText,
+      },
+    });
+  }, [container, errorText, semantics]);
+};