feat: introduce design tokens to the chat sdk

examples/SampleApp/ios/Podfile.lock

@@ -3584,7 +3584,7 @@ SPEC CHECKSUMS:
   op-sqlite: b9a4028bef60145d7b98fbbc4341c83420cdcfd5
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
-  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
+  RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
   RCTDeprecation: 300c5eb91114d4339b0bb39505d0f4824d7299b7
   RCTRequired: e0446b01093475b7082fbeee5d1ef4ad1fe20ac4
   RCTTypeSafety: cb974efcdc6695deedf7bf1eb942f2a0603a063f

examples/SampleApp/src/components/ScreenHeader.tsx

@@ -118,7 +118,8 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
 
   const {
     theme: {
-      colors: { black, border, grey, white },
+      colors: { black, grey, white },
+      semantics,
     },
   } = useTheme();
   const insets = useSafeAreaInsets();
@@ -129,7 +130,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
         styles.safeAreaContainer,
         {
           backgroundColor: white,
-          borderBottomColor: border.surfaceSubtle,
+          borderBottomColor: semantics.borderCoreSubtle,
           height: HEADER_CONTENT_HEIGHT + (inSafeArea ? 0 : insets.top),
         },
         style,

package/eslint.config.mjs

@@ -75,7 +75,18 @@ export default tsEslint.config(
     settings: {
       'import/resolver': {
         node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+          extensions: [
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.ios.ts',
+            '.android.ts',
+            '.web.ts',
+            '.ios.tsx',
+            '.android.tsx',
+            '.web.tsx',
+          ],
           paths: ['src'],
         },
       },

package/src/components/Attachment/AttachmentActions.tsx

@@ -45,7 +45,8 @@ const AttachmentActionsWithContext = (props: AttachmentActionsPropsWithContext)
 
   const {
     theme: {
-      colors: { accent_blue, black, border, transparent, white },
+      semantics,
+      colors: { accent_blue, black, transparent, white },
       messageSimple: {
         actions: {
           button: {
@@ -82,7 +83,7 @@ const AttachmentActionsWithContext = (props: AttachmentActionsPropsWithContext)
                   ? primaryBackgroundColor || accent_blue
                   : defaultBackgroundColor || white,
                 borderColor: primary
-                  ? primaryBorderColor || border.surfaceSubtle
+                  ? primaryBorderColor || semantics.borderCoreDefault
                   : defaultBorderColor || transparent,
               },
               buttonStyle,

package/src/components/ChannelList/Skeleton.tsx

@@ -46,7 +46,8 @@ export const Skeleton = () => {
         height = 64,
         maskFillColor,
       },
-      colors: { border, grey_gainsboro, white_snow },
+      colors: { grey_gainsboro, white_snow },
+      semantics,
     },
   } = useTheme();
 
@@ -126,7 +127,7 @@ export const Skeleton = () => {
 
   return (
     <View
-      style={[styles.container, { borderBottomColor: border.surfaceSubtle }, container]}
+      style={[styles.container, { borderBottomColor: semantics.borderCoreDefault }, container]}
       testID='channel-preview-skeleton'
     >
       <View style={[styles.background, { backgroundColor: white_snow }, background]} />

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -119,7 +119,8 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
   const {
     theme: {
       channelPreview: { container, contentContainer, row, title },
-      colors: { border, white_snow },
+      colors: { white_snow },
+      semantics,
     },
   } = useTheme();
 
@@ -138,7 +139,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
       style={[
         // { opacity: pressed ? 0.5 : 1 },
         styles.container,
-        { backgroundColor: white_snow, borderBottomColor: border.surfaceSubtle },
+        { backgroundColor: white_snow, borderBottomColor: semantics.borderCoreDefault },
         container,
       ]}
       testID='channel-preview-button'

package/src/components/Message/MessageSimple/MessageAvatar.tsx

@@ -26,6 +26,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
 
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
+  console.log(message);
+
   return (
     <View
       style={[alignment === 'left' ? leftAlign : rightAlign, container]}

package/src/components/Message/MessageSimple/__tests__/MessageAvatar.test.js

@@ -2,37 +2,44 @@ import React from 'react';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import {
   generateMessage,
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Chat } from '../../../Chat/Chat';
 import { MessageAvatar } from '../MessageAvatar';
 
 afterEach(cleanup);
 
 describe('MessageAvatar', () => {
+  let chatClient;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser({ id: 'me' });
+  });
+
   it('should render message avatar', async () => {
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
     render(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {
       expect(screen.getByTestId('message-avatar')).toBeTruthy();
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar alignment='right' groupStyles={[]} message={message} />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {
@@ -45,14 +52,14 @@ describe('MessageAvatar', () => {
     });
 
     screen.rerender(
-      <ThemeProvider style={defaultTheme}>
+      <Chat client={chatClient} style={defaultTheme}>
         <MessageAvatar
           alignment='left'
           groupStyles={['single']}
           message={staticMessage}
           showAvatar
         />
-      </ThemeProvider>,
+      </Chat>,
     );
 
     await waitFor(() => {

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -29,10 +29,10 @@ exports[`MessageAvatar should render message avatar 1`] = `
             "width": 24,
           },
           {
-            "backgroundColor": "#D7F7FB",
+            "backgroundColor": "#d1f3f6",
           },
           {
-            "borderColor": "hsla(0, 0%, 0%, 0.1)",
+            "borderColor": "rgba(0, 0, 0, 0.1)",
             "borderWidth": 1,
           },
         ]

package/src/components/MessageInput/MessageInput.tsx

@@ -264,7 +264,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const { height } = useStateStore(messageInputHeightStore.store, messageInputHeightStoreSelector);
   const {
     theme: {
-      colors: { border, grey_whisper, white, white_smoke },
+      semantics,
+      colors: { grey_whisper, white, white_smoke },
       messageInput: {
         attachmentSelectionBar,
         container,
@@ -478,7 +479,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                 styles.wrapper,
                 {
                   backgroundColor: white,
-                  borderColor: border.surfaceSubtle,
+                  borderColor: semantics.borderCoreDefault,
                   paddingBottom: BOTTOM_OFFSET,
                 },
                 wrapper,

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -21,7 +21,8 @@ export const SendMessageDisallowedIndicator = () => {
   const { t } = useTranslationContext();
   const {
     theme: {
-      colors: { border, grey_dark, white },
+      semantics,
+      colors: { grey_dark, white },
       messageInput: {
         sendMessageDisallowedIndicator: { container, text },
       },
@@ -34,7 +35,7 @@ export const SendMessageDisallowedIndicator = () => {
         styles.container,
         {
           backgroundColor: white,
-          borderTopColor: border.surfaceSubtle,
+          borderTopColor: semantics.borderCoreDefault,
           height: 50,
         },
         container,

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -4,13 +4,14 @@ import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewClose } from '../../../../icons/NewClose';
+import { primitives } from '../../../../theme';
 
 type AttachmentRemoveControlProps = PressableProps;
 
 export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProps) => {
   const {
     theme: {
-      colors: { control },
+      semantics,
       messageInput: {
         dismissAttachmentUpload: { dismiss, dismissIcon, dismissIconColor },
       },
@@ -30,29 +31,34 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
       ]}
       testID='remove-upload-preview'
     >
-      <NewClose height={16} stroke={dismissIconColor || control.icon} {...dismissIcon} width={16} />
+      <NewClose
+        height={16}
+        stroke={dismissIconColor || semantics.controlRemoveControlIcon}
+        {...dismissIcon}
+        width={16}
+      />
     </Pressable>
   );
 };
 
 const useStyles = () => {
   const {
-    theme: {
-      colors: { control },
-      radius,
-    },
+    theme: { semantics },
   } = useTheme();
+
+  const { controlRemoveControlBg, controlRemoveControlBorder } = semantics;
+
   return useMemo(
     () =>
       StyleSheet.create({
         dismiss: {
-          backgroundColor: control.bg,
-          borderColor: control.border,
-          borderRadius: radius.xl,
+          backgroundColor: controlRemoveControlBg,
+          borderColor: controlRemoveControlBorder,
+          borderRadius: primitives.radiusXl,
           borderWidth: 2,
           overflow: 'hidden',
         },
       }),
-    [control, radius],
+    [controlRemoveControlBg, controlRemoveControlBorder],
   );
 };

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 
 import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
@@ -20,6 +20,7 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { isSoundPackageAvailable } from '../../../../native';
+import { primitives } from '../../../../theme';
 
 const IMAGE_PREVIEW_SIZE = 72;
 const FILE_PREVIEW_HEIGHT = 224;
@@ -33,7 +34,6 @@ export type AttachmentUploadListPreviewPropsWithContext = Pick<
 >;
 
 const ItemSeparatorComponent = () => {
-  const styles = useStyles();
   const {
     theme: {
       messageInput: {
@@ -76,7 +76,6 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
 
-  const styles = useStyles();
   const {
     theme: {
       messageInput: {
@@ -234,25 +233,15 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
   );
 };
 
-const useStyles = () => {
-  const {
-    theme: { spacing },
-  } = useTheme();
-
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        flatList: {
-          overflow: 'visible',
-        },
-        itemSeparator: {
-          width: spacing.xs,
-        },
-        wrapper: {},
-      }),
-    [spacing.xs],
-  );
-};
+const styles = StyleSheet.create({
+  flatList: {
+    overflow: 'visible',
+  },
+  itemSeparator: {
+    width: primitives.spacingXs,
+  },
+  wrapper: {},
+});
 
 AttachmentUploadPreviewList.displayName =
   'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}';