From f01677a0072be884e4d3b2658f469953a89a921d Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 12:18:18 +0100
Subject: [PATCH 01/16] feat: redesign poll results screen

---
 .../Poll/components/PollButtons.tsx           | 27 +++----
 .../Poll/components/PollModalHeader.tsx       | 81 ++++++++++++++-----
 .../components/PollResults/PollResultItem.tsx | 79 ++++++++++++------
 .../components/PollResults/PollResults.tsx    | 77 +++++++++++++-----
 .../Poll/components/PollResults/PollVote.tsx  | 55 ++++++++-----
 .../src/contexts/themeContext/utils/theme.ts  |  4 +
 6 files changed, 221 insertions(+), 102 deletions(-)

diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index 20b3dfbbb3..aa30911df2 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -29,11 +29,6 @@ export const ViewResultsButton = (props: PollButtonProps) => {
     setShowResults(true);
   }, [message, onPress, poll]);
 
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
   const styles = useStyles();
 
   const onRequestClose = useCallback(() => {
@@ -50,7 +45,7 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       />
       {showResults ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
-          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+          <SafeAreaViewWrapper style={styles.safeArea}>
             <PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
             <PollResults message={message} poll={poll} />
           </SafeAreaViewWrapper>
@@ -80,11 +75,7 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
     setShowAllOptions(false);
   }, []);
 
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
+  const styles = useStyles();
 
   return (
     <>
@@ -96,7 +87,7 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       ) : null}
       {showAllOptions ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAllOptions}>
-          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+          <SafeAreaViewWrapper style={styles.safeArea}>
             <PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
             <PollAllOptions message={message} poll={poll} />
           </SafeAreaViewWrapper>
@@ -122,11 +113,7 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
     setShowAnswers(true);
   }, [message, onPress, poll]);
 
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
+  const styles = useStyles();
 
   const onRequestClose = useCallback(() => {
     setShowAnswers(false);
@@ -142,7 +129,7 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       ) : null}
       {showAnswers ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAnswers}>
-          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
+          <SafeAreaViewWrapper style={styles.safeArea}>
             <PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
             <PollAnswersList message={message} poll={poll} />
           </SafeAreaViewWrapper>
@@ -275,6 +262,10 @@ const useStyles = () => {
           ? semantics.chatBorderOnChatOutgoing
           : semantics.chatBorderOnChatIncoming,
       },
+      safeArea: {
+        backgroundColor: semantics.backgroundElevationElevation1,
+        flex: 1,
+      },
     });
   }, [semantics, isPollCreatedByClient]);
 };
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 9b8486a148..5b73a83bd0 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Back } from '../../../icons';
+import { NewCross } from '../../../icons/NewCross';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
 
 export type PollModalHeaderProps = {
   onPress: () => void;
@@ -12,31 +14,70 @@ export type PollModalHeaderProps = {
 export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
   const {
     theme: {
-      colors: { black, text_high_emphasis, white },
       poll: {
         modalHeader: { container, title: titleStyle },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
-    <View style={[styles.container, { backgroundColor: white }, container]}>
-      <Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
-        <Back height={24} pathFill={text_high_emphasis} viewBox='0 0 24 24' width={24} />
-      </Pressable>
-      <Text numberOfLines={1} style={[styles.title, { color: black }, titleStyle]}>
-        {title}
-      </Text>
+    <View style={[styles.container, container]}>
+      <View style={styles.sideContainer}>
+        <Button
+          variant='secondary'
+          type='outline'
+          size='md'
+          iconOnly
+          LeadingIcon={NewCross}
+          onPress={onPress}
+          testID='poll-results-close-button'
+        />
+      </View>
+      <View style={styles.centerContainer}>
+        <Text numberOfLines={1} style={[styles.title, titleStyle]}>
+          {title}
+        </Text>
+      </View>
+      <View style={[styles.sideContainer, styles.sideContainerRight]} />
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 18,
-  },
-  title: { fontSize: 16, fontWeight: '500', marginLeft: 32 },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingHorizontal: primitives.spacingMd,
+          paddingVertical: 10,
+          backgroundColor: semantics.backgroundElevationElevation1,
+        },
+        centerContainer: {
+          alignItems: 'center',
+          flex: 1,
+          justifyContent: 'center',
+        },
+        sideContainer: {
+          flex: 1,
+          justifyContent: 'center',
+        },
+        sideContainerRight: {
+          alignItems: 'flex-end',
+        },
+        title: {
+          fontSize: 17,
+          lineHeight: 22,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+        },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 994ece5de8..80d950d8f0 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Modal, StyleSheet, Text, View } from 'react-native';
 
 import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
@@ -13,6 +13,7 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
+import { primitives } from '../../../../theme';
 import { SafeAreaViewWrapper } from '../../../UIComponents/SafeAreaViewWrapper';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
@@ -79,53 +80,85 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
 
 export type PollResultItemProps = {
   option: PollOption;
+  index: number;
 };
 
 const PollResultsVoteItem = (vote: PollVoteClass) => (
   <PollVote key={`results_vote_${vote.id}`} vote={vote} />
 );
 
-export const PollResultsItem = ({ option }: PollResultItemProps) => {
+export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
   const { t } = useTranslationContext();
   const { latestVotesByOption, voteCountsByOption } = usePollState();
 
   const {
     theme: {
-      colors: { bg_user, black },
       poll: {
         results: {
-          item: { container, headerContainer, title, voteCount },
+          item: { container, headerContainer, title, titleMeta, voteCount },
         },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
-    <View style={[styles.container, { backgroundColor: bg_user }, container]}>
+    <View style={[styles.container, container]}>
+      <Text style={[styles.titleMeta, titleMeta]}>{`Option ${index + 1}`}</Text>
       <View style={[styles.headerContainer, headerContainer]}>
-        <Text style={[styles.title, { color: black }, title]}>{option.text}</Text>
-        <Text style={[styles.voteCount, { color: black }, voteCount]}>
+        <Text style={[styles.title, title]}>{option.text}</Text>
+        <Text style={[styles.voteCount, voteCount]}>
           {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
         </Text>
       </View>
-      {latestVotesByOption?.[option.id]?.length > 0 ? (
-        <View style={{ marginTop: 16 }}>
-          {(latestVotesByOption?.[option.id] ?? []).slice(0, 5).map(PollResultsVoteItem)}
-        </View>
-      ) : null}
+      {latestVotesByOption?.[option.id]?.length > 0
+        ? (latestVotesByOption?.[option.id] ?? []).slice(0, 5).map(PollResultsVoteItem)
+        : null}
       <ShowAllVotesButton option={option} />
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    marginBottom: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  headerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
-  title: { flex: 1, fontSize: 16, fontWeight: '500' },
-  voteCount: { fontSize: 16, marginLeft: 16 },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          borderRadius: primitives.radiusLg,
+          marginBottom: primitives.spacingMd,
+          padding: primitives.spacingMd,
+        },
+        headerContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingBottom: primitives.spacingXs,
+        },
+        title: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeLg,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        titleMeta: {
+          fontSize: primitives.typographyFontSizeSm,
+          color: semantics.textTertiary,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightMedium,
+        },
+        voteCount: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          marginLeft: primitives.spacingMd,
+        },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/components/Poll/components/PollResults/PollResults.tsx b/package/src/components/Poll/components/PollResults/PollResults.tsx
index 277812a7ac..15796e3801 100644
--- a/package/src/components/Poll/components/PollResults/PollResults.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResults.tsx
@@ -5,7 +5,13 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { PollResultsItem } from './PollResultItem';
 
-import { PollContextProvider, PollContextValue, useTheme } from '../../../../contexts';
+import {
+  PollContextProvider,
+  PollContextValue,
+  useTheme,
+  useTranslationContext,
+} from '../../../../contexts';
+import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
 
 export type PollResultsProps = PollContextValue & {
@@ -26,26 +32,26 @@ export const PollResultsContent = ({
     [voteCountsByOption, options],
   );
 
+  const { t } = useTranslationContext();
+
   const {
     theme: {
-      colors: { bg_user, black, white },
       poll: {
-        results: { container, scrollView, title },
+        results: { container, scrollView, title, titleMeta },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
-    <ScrollView
-      style={[styles.scrollView, { backgroundColor: white }, scrollView]}
-      {...additionalScrollViewProps}
-    >
-      <View style={[styles.container, { backgroundColor: bg_user }, container]}>
-        <Text style={[styles.title, { color: black }, title]}>{name}</Text>
+    <ScrollView style={[styles.scrollView, scrollView]} {...additionalScrollViewProps}>
+      <View style={[styles.container, container]}>
+        <Text style={[styles.titleMeta, titleMeta]}>{t('Question')}</Text>
+        <Text style={[styles.title, title]}>{name}</Text>
       </View>
-      <View style={{ marginTop: 16 }}>
-        {sortedOptions.map((option) => (
-          <PollResultsItem key={`results_${option.id}`} option={option} />
+      <View style={styles.resultsContainer}>
+        {sortedOptions.map((option, index) => (
+          <PollResultsItem key={`results_${option.id}`} option={option} index={index} />
         ))}
       </View>
     </ScrollView>
@@ -67,13 +73,40 @@ export const PollResults = ({
   </PollContextProvider>
 );
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    marginTop: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 18,
-  },
-  scrollView: { flex: 1, marginHorizontal: 16 },
-  title: { fontSize: 16, fontWeight: '500' },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: primitives.radiusLg,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+        },
+        scrollView: {
+          flex: 1,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundElevationElevation1,
+        },
+        resultsContainer: {
+          paddingVertical: primitives.spacing2xl,
+        },
+        title: {
+          fontSize: primitives.typographyFontSizeLg,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        titleMeta: {
+          fontSize: primitives.typographyFontSizeSm,
+          color: semantics.textTertiary,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightMedium,
+        },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/components/Poll/components/PollResults/PollVote.tsx b/package/src/components/Poll/components/PollResults/PollVote.tsx
index d2c19a2ed0..e4e0a6ddaf 100644
--- a/package/src/components/Poll/components/PollResults/PollVote.tsx
+++ b/package/src/components/Poll/components/PollResults/PollVote.tsx
@@ -5,6 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
 
 import { useTheme, useTranslationContext } from '../../../../contexts';
+import { primitives } from '../../../../theme';
 import { getDateString } from '../../../../utils/i18n/getDateString';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
 
@@ -15,7 +16,6 @@ export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
   const { votingVisibility } = usePollState();
   const {
     theme: {
-      colors: { black, text_low_emphasis },
       poll: {
         results: {
           vote: { container, dateText, userName },
@@ -23,6 +23,7 @@ export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const dateString = useMemo(
     () =>
@@ -43,28 +44,44 @@ export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
   return (
     <View style={[styles.voteContainer, container]}>
       <View style={styles.userContainer}>
-        {!isAnonymous && vote.user ? <UserAvatar user={vote.user} size='xs' showBorder /> : null}
-        <Text style={[styles.voteUserName, { color: black }, userName]}>
+        {!isAnonymous && vote.user ? <UserAvatar user={vote.user} size='md' showBorder /> : null}
+        <Text style={[styles.voteUserName, userName]}>
           {isAnonymous ? t('Anonymous') : (vote.user?.name ?? vote.user?.id)}
         </Text>
       </View>
-      <Text style={[styles.voteDate, { color: text_low_emphasis }, dateText]}>{dateString}</Text>
+      <Text style={[styles.voteDate, dateText]}>{dateString}</Text>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  voteContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    paddingVertical: 8,
-  },
-  voteCount: { fontSize: 16, marginLeft: 16 },
-  voteDate: { fontSize: 14 },
-  voteUserName: { fontSize: 14, marginLeft: 4 },
-  userContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        voteContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          paddingVertical: primitives.spacingXs,
+        },
+        voteDate: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          color: semantics.textTertiary,
+        },
+        voteUserName: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          color: semantics.textPrimary,
+          paddingLeft: primitives.spacingXs,
+        },
+        userContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 814f178faf..cb52979802 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -876,10 +876,12 @@ export type Theme = {
         container: ViewStyle;
         headerContainer: ViewStyle;
         title: TextStyle;
+        titleMeta: TextStyle;
         voteCount: TextStyle;
       };
       scrollView: ViewStyle;
       title: TextStyle;
+      titleMeta: TextStyle;
       vote: { container: ViewStyle; dateText: TextStyle; userName: TextStyle };
     };
   };
@@ -1712,10 +1714,12 @@ export const defaultTheme: Theme = {
         container: {},
         headerContainer: {},
         title: {},
+        titleMeta: {},
         voteCount: {},
       },
       scrollView: {},
       title: {},
+      titleMeta: {},
       vote: { container: {}, dateText: {}, userName: {} },
     },
   },

From c70c3a3f2bdda45671d96867272587ae3ce042ed Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 12:24:43 +0100
Subject: [PATCH 02/16] chore: add missing translation

---
 .../components/Poll/components/PollResults/PollResultItem.tsx | 4 +++-
 package/src/i18n/en.json                                      | 1 +
 package/src/i18n/es.json                                      | 1 +
 package/src/i18n/fr.json                                      | 1 +
 package/src/i18n/he.json                                      | 1 +
 package/src/i18n/hi.json                                      | 1 +
 package/src/i18n/it.json                                      | 1 +
 package/src/i18n/ja.json                                      | 1 +
 package/src/i18n/ko.json                                      | 1 +
 package/src/i18n/nl.json                                      | 1 +
 package/src/i18n/pt-br.json                                   | 1 +
 package/src/i18n/ru.json                                      | 1 +
 package/src/i18n/tr.json                                      | 1 +
 13 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 80d950d8f0..0b777fda14 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -104,7 +104,9 @@ export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
 
   return (
     <View style={[styles.container, container]}>
-      <Text style={[styles.titleMeta, titleMeta]}>{`Option ${index + 1}`}</Text>
+      <Text style={[styles.titleMeta, titleMeta]}>
+        {t('Option {{count}}', { count: index + 1 })}
+      </Text>
       <View style={[styles.headerContainer, headerContainer]}>
         <Text style={[styles.title, title]}>{option.text}</Text>
         <Text style={[styles.voteCount, voteCount]}>
diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json
index 6f12a2f8e9..62fc9566b4 100644
--- a/package/src/i18n/en.json
+++ b/package/src/i18n/en.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Only visible to you",
   "Open Settings": "Open Settings",
   "Option": "Option",
+  "Option {{count}}": "Option {{count}}",
   "Option already exists": "Option already exists",
   "Options": "Options",
   "Photo": "Photo",
diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json
index 8073e73845..66488dce0c 100644
--- a/package/src/i18n/es.json
+++ b/package/src/i18n/es.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Solo visible para ti",
   "Open Settings": "Configuración abierta",
   "Option": "Opción",
+  "Option {{count}}": "Opción {{count}}",
   "Option already exists": "La opción ya existe",
   "Options": "Opciones",
   "Photo": "Foto",
diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json
index eb065f56ff..140ca0350f 100644
--- a/package/src/i18n/fr.json
+++ b/package/src/i18n/fr.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Seulement visible par vous",
   "Open Settings": "Ouvrir les paramètres",
   "Option": "Option",
+  "Option {{count}}": "Option {{count}}",
   "Option already exists": "L'option existe déjà",
   "Options": "Options",
   "Photo": "Photo",
diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json
index dd10ce8bf6..c53ace4781 100644
--- a/package/src/i18n/he.json
+++ b/package/src/i18n/he.json
@@ -72,6 +72,7 @@
   "Only visible to you": "גלוי רק לך",
   "Open Settings": "פתח את ההגדרות",
   "Option": "אפשרות",
+  "Option {{count}}": "אפשרות {{count}}",
   "Option already exists": "האפשרות כבר קיימת",
   "Options": "אפשרויות",
   "Photo": "תמונה",
diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json
index 46ee2096be..28b3d99bc3 100644
--- a/package/src/i18n/hi.json
+++ b/package/src/i18n/hi.json
@@ -72,6 +72,7 @@
   "Only visible to you": "केवल आपको दिखाई दे रहा है",
   "Open Settings": "सेटिंग्स खोलें",
   "Option": "विकल्प",
+  "Option {{count}}": "विकल्प {{count}}",
   "Option already exists": "विकल्प पहले से मौजूद है",
   "Options": "विकल्प",
   "Photo": "तस्वीर",
diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json
index 93bb20f5d7..200a6e767e 100644
--- a/package/src/i18n/it.json
+++ b/package/src/i18n/it.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Visibile solo a te",
   "Open Settings": "Apri Impostazioni",
   "Option": "Opzione",
+  "Option {{count}}": "Opzione {{count}}",
   "Option already exists": "L'opzione esiste già",
   "Options": "Opzioni",
   "Photo": "Foto",
diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json
index 6277931098..46539243a0 100644
--- a/package/src/i18n/ja.json
+++ b/package/src/i18n/ja.json
@@ -72,6 +72,7 @@
   "Only visible to you": "あなただけに見える",
   "Open Settings": "設定を開く",
   "Option": "オプション",
+  "Option {{count}}": "オプション {{count}}",
   "Option already exists": "オプションはすでに存在します",
   "Options": "オプション",
   "Photo": "写真",
diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json
index b186d0a0cc..2812601efe 100644
--- a/package/src/i18n/ko.json
+++ b/package/src/i18n/ko.json
@@ -72,6 +72,7 @@
   "Only visible to you": "당신만 볼 수 있습니다",
   "Open Settings": "설정 열기",
   "Option": "옵션",
+  "Option {{count}}": "옵션 {{count}}",
   "Option already exists": "옵션은 이미 존재합니다",
   "Options": "옵션",
   "Photo": "사진",
diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json
index 1ab63f14a5..ee00cbb221 100644
--- a/package/src/i18n/nl.json
+++ b/package/src/i18n/nl.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Alleen zichtbaar voor jou",
   "Open Settings": "Open instellingen",
   "Option": "Optie",
+  "Option {{count}}": "Optie {{count}}",
   "Option already exists": "Optie bestaat al",
   "Options": "Opties",
   "Photo": "Foto",
diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json
index cf7157b8d8..adcb706b3e 100644
--- a/package/src/i18n/pt-br.json
+++ b/package/src/i18n/pt-br.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Apenas visível para você",
   "Open Settings": "Abrir Configurações",
   "Option": "Opção",
+  "Option {{count}}": "Opção {{count}}",
   "Option already exists": "A opção já existe",
   "Options": "Opções",
   "Photo": "Foto",
diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json
index e1818175ff..c82f1aa860 100644
--- a/package/src/i18n/ru.json
+++ b/package/src/i18n/ru.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Видно только вам",
   "Open Settings": "Открыть настройки",
   "Option": "Вариант",
+  "Option {{count}}": "Вариант {{count}}",
   "Option already exists": "Вариант уже существует",
   "Options": "Варианты",
   "Photo": "Фото",
diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json
index 5d0147efa1..4a2c85e20f 100644
--- a/package/src/i18n/tr.json
+++ b/package/src/i18n/tr.json
@@ -72,6 +72,7 @@
   "Only visible to you": "Sadece siz görebilirsiniz",
   "Open Settings": "Ayarları aç",
   "Option": "Seçenek",
+  "Option {{count}}": "Seçenek {{count}}",
   "Option already exists": "Seçenek zaten var",
   "Options": "Seçenekler",
   "Photo": "Fotoğraf",

From 0de847b80a404e04fbab5a7db6620f90ba08acac Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 13:06:03 +0100
Subject: [PATCH 03/16] fix: date formatting

---
 package/src/i18n/en.json                      |  2 +-
 package/src/i18n/es.json                      |  2 +-
 package/src/i18n/fr.json                      |  2 +-
 package/src/i18n/he.json                      |  2 +-
 package/src/i18n/hi.json                      |  2 +-
 package/src/i18n/it.json                      |  2 +-
 package/src/i18n/ja.json                      |  2 +-
 package/src/i18n/ko.json                      |  2 +-
 package/src/i18n/nl.json                      |  2 +-
 package/src/i18n/pt-br.json                   |  2 +-
 package/src/i18n/ru.json                      |  2 +-
 package/src/i18n/tr.json                      |  2 +-
 .../src/utils/i18n/predefinedFormatters.ts    | 32 +++++++++++++++++++
 package/src/utils/i18n/types.ts               |  1 +
 14 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json
index 62fc9566b4..87309ebc57 100644
--- a/package/src/i18n/en.json
+++ b/package/src/i18n/en.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp |  timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Yesterday]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Tomorrow]\", \"nextWeek\":\"dddd [at] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Yesterday]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Tomorrow]\", \"nextWeek\":\"dddd [at] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json
index 66488dce0c..3e7736a443 100644
--- a/package/src/i18n/es.json
+++ b/package/src/i18n/es.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json
index 140ca0350f..6feee0bff3 100644
--- a/package/src/i18n/fr.json
+++ b/package/src/i18n/fr.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Hier]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Demain]\", \"nextWeek\":\"dddd [à] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Hier]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Demain]\", \"nextWeek\":\"dddd [à] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json
index c53ace4781..b787653b65 100644
--- a/package/src/i18n/he.json
+++ b/package/src/i18n/he.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[אתמול]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[מחר]\",\"nextWeek\":\"dddd [בשעה] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[אתמול]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[מחר]\",\"nextWeek\":\"dddd [בשעה] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json
index 28b3d99bc3..47927bfe6d 100644
--- a/package/src/i18n/hi.json
+++ b/package/src/i18n/hi.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[कल]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[कल]\",\"nextWeek\":\"dddd [को] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[कल]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[कल]\",\"nextWeek\":\"dddd [को] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json
index 200a6e767e..162b552c02 100644
--- a/package/src/i18n/it.json
+++ b/package/src/i18n/it.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ieri]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Domani]\",\"nextWeek\":\"dddd [alle] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ieri]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Domani]\",\"nextWeek\":\"dddd [alle] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json
index 46539243a0..c31f9ec4dc 100644
--- a/package/src/i18n/ja.json
+++ b/package/src/i18n/ja.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[昨日]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[明日]\",\"nextWeek\":\"dddd [の] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[昨日]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[明日]\",\"nextWeek\":\"dddd [の] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json
index 2812601efe..9ee456a513 100644
--- a/package/src/i18n/ko.json
+++ b/package/src/i18n/ko.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[어제]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[내일]\",\"nextWeek\":\"dddd [LT에]\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[어제]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[내일]\",\"nextWeek\":\"dddd [LT에]\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json
index ee00cbb221..c10cf9516d 100644
--- a/package/src/i18n/nl.json
+++ b/package/src/i18n/nl.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Gisteren]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Morgen]\",\"nextWeek\":\"dddd [om] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Gisteren]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Morgen]\",\"nextWeek\":\"dddd [om] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json
index adcb706b3e..4975c31232 100644
--- a/package/src/i18n/pt-br.json
+++ b/package/src/i18n/pt-br.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ontem]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Amanhã]\",\"nextWeek\":\"dddd [às] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ontem]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Amanhã]\",\"nextWeek\":\"dddd [às] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json
index c82f1aa860..6ec8f50384 100644
--- a/package/src/i18n/ru.json
+++ b/package/src/i18n/ru.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Вчера]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Завтра]\",\"nextWeek\":\"dddd [в] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Вчера]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Завтра]\",\"nextWeek\":\"dddd [в] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json
index 4a2c85e20f..a0270b2681 100644
--- a/package/src/i18n/tr.json
+++ b/package/src/i18n/tr.json
@@ -141,7 +141,7 @@
   "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
-  "timestamp/PollVote": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Dün]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Yarın]\",\"nextWeek\":\"dddd [saat] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/PollVote": "{{ timestamp | relativeCompactDateFormatter }}",
   "timestamp/ReminderNotification": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Dün]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Yarın]\",\"nextWeek\":\"dddd [saat] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
diff --git a/package/src/utils/i18n/predefinedFormatters.ts b/package/src/utils/i18n/predefinedFormatters.ts
index 74da0b6dca..dea1054fe6 100644
--- a/package/src/utils/i18n/predefinedFormatters.ts
+++ b/package/src/utils/i18n/predefinedFormatters.ts
@@ -5,6 +5,8 @@ import type { Duration as DayjsDuration } from 'dayjs/plugin/duration';
 import { getDateString } from './getDateString';
 import { DurationFormatterOptions, PredefinedFormatters, TimestampFormatterOptions } from './types';
 
+import { isDayOrMoment } from '../../contexts/translationContext/isDayOrMoment';
+
 export const predefinedFormatters: PredefinedFormatters = {
   durationFormatter:
     (streamI18n) =>
@@ -50,4 +52,34 @@ export const predefinedFormatters: PredefinedFormatters = {
       }
       return result;
     },
+  relativeCompactDateFormatter: (streamI18n) => (value) => {
+    const parsedTime = streamI18n.tDateTimeParser(value);
+    const parsedNow = streamI18n.tDateTimeParser();
+
+    if (!isDayOrMoment(parsedTime) || !isDayOrMoment(parsedNow)) {
+      return JSON.stringify(value);
+    }
+
+    const oneDayInMs = 24 * 60 * 60 * 1000;
+    const startOfNowDayMs = parsedNow.startOf('day').valueOf();
+    const startOfTimeDayMs = parsedTime.startOf('day').valueOf();
+    const daysAgo = Math.floor((startOfNowDayMs - startOfTimeDayMs) / oneDayInMs);
+
+    if (daysAgo <= 0) {
+      return 'Today';
+    }
+    if (daysAgo === 1) {
+      return 'Yesterday';
+    }
+    if (daysAgo <= 6) {
+      return `${daysAgo}d ago`;
+    }
+
+    const weeksAgo = Math.floor(daysAgo / 7);
+    if (weeksAgo <= 3) {
+      return `${weeksAgo}w ago`;
+    }
+
+    return parsedTime.format('DD/MM/YY');
+  },
 };
diff --git a/package/src/utils/i18n/types.ts b/package/src/utils/i18n/types.ts
index b5214c7a2e..eaa0a3b990 100644
--- a/package/src/utils/i18n/types.ts
+++ b/package/src/utils/i18n/types.ts
@@ -76,5 +76,6 @@ export type TimestampFormatterOptions = {
 
 export type PredefinedFormatters = {
   durationFormatter: FormatterFactory<string>;
+  relativeCompactDateFormatter: FormatterFactory<string | Date>;
   timestampFormatter: FormatterFactory<string | Date>;
 };

From 0bac549c9c14621379e29c47d9463c263089a4d2 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 13:45:37 +0100
Subject: [PATCH 04/16] feat: add new tokens to account for missing colors

---
 .../components/PollResults/PollResultItem.tsx |  3 +-
 .../components/PollResults/PollResults.tsx    |  2 +-
 .../Poll/components/PollResults/PollVote.tsx  |  1 +
 .../src/theme/generated/StreamTokens.types.ts | 63 +++++++++++--------
 .../generated/dark/StreamTokens.android.ts    | 47 ++++++++------
 .../theme/generated/dark/StreamTokens.ios.ts  | 61 ++++++++++--------
 .../theme/generated/dark/StreamTokens.web.ts  | 47 ++++++++------
 .../StreamTokens.android.ts                   | 47 ++++++++------
 .../high-contrast-light/StreamTokens.ios.ts   | 61 ++++++++++--------
 .../high-contrast-light/StreamTokens.web.ts   | 47 ++++++++------
 .../generated/light/StreamTokens.android.ts   | 49 +++++++++------
 .../theme/generated/light/StreamTokens.ios.ts | 63 +++++++++++--------
 .../theme/generated/light/StreamTokens.web.ts | 49 +++++++++------
 13 files changed, 316 insertions(+), 224 deletions(-)

diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 0b777fda14..b45b101d50 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -129,7 +129,7 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
           borderRadius: primitives.radiusLg,
           marginBottom: primitives.spacingMd,
           padding: primitives.spacingMd,
@@ -137,6 +137,7 @@ const useStyles = () => {
         headerContainer: {
           flexDirection: 'row',
           justifyContent: 'space-between',
+          alignItems: 'center',
           paddingBottom: primitives.spacingXs,
         },
         title: {
diff --git a/package/src/components/Poll/components/PollResults/PollResults.tsx b/package/src/components/Poll/components/PollResults/PollResults.tsx
index 15796e3801..8a6d5e0905 100644
--- a/package/src/components/Poll/components/PollResults/PollResults.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResults.tsx
@@ -83,7 +83,7 @@ const useStyles = () => {
         container: {
           borderRadius: primitives.radiusLg,
           padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
         },
         scrollView: {
           flex: 1,
diff --git a/package/src/components/Poll/components/PollResults/PollVote.tsx b/package/src/components/Poll/components/PollResults/PollVote.tsx
index e4e0a6ddaf..c389ca65a2 100644
--- a/package/src/components/Poll/components/PollResults/PollVote.tsx
+++ b/package/src/components/Poll/components/PollResults/PollVote.tsx
@@ -64,6 +64,7 @@ const useStyles = () => {
         voteContainer: {
           flexDirection: 'row',
           justifyContent: 'space-between',
+          alignItems: 'center',
           paddingVertical: primitives.spacingXs,
         },
         voteDate: {
diff --git a/package/src/theme/generated/StreamTokens.types.ts b/package/src/theme/generated/StreamTokens.types.ts
index 28e035e0a7..0fbae14c1e 100644
--- a/package/src/theme/generated/StreamTokens.types.ts
+++ b/package/src/theme/generated/StreamTokens.types.ts
@@ -197,27 +197,31 @@ export interface FoundationsTypography {
   fontFamilyRobotoMono: TextStyle['fontFamily'];
   fontFamilySfMono: TextStyle['fontFamily'];
   fontFamilySfPro: TextStyle['fontFamily'];
-  fontSizeSize10: TextStyle['fontSize'];
-  fontSizeSize12: TextStyle['fontSize'];
-  fontSizeSize13: TextStyle['fontSize'];
-  fontSizeSize14: TextStyle['fontSize'];
-  fontSizeSize15: TextStyle['fontSize'];
-  fontSizeSize16: TextStyle['fontSize'];
-  fontSizeSize17: TextStyle['fontSize'];
-  fontSizeSize18: TextStyle['fontSize'];
-  fontSizeSize20: TextStyle['fontSize'];
-  fontSizeSize24: TextStyle['fontSize'];
-  fontSizeSize28: TextStyle['fontSize'];
-  fontSizeSize32: TextStyle['fontSize'];
-  fontSizeSize40: TextStyle['fontSize'];
-  fontSizeSize48: TextStyle['fontSize'];
-  fontSizeSize8: TextStyle['fontSize'];
+  fontSizeSize10: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize11: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize12: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize13: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize14: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize15: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize16: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize17: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize18: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize20: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize22: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize24: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize28: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize32: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize40: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize48: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize64: NonNullable<TextStyle['fontSize']>;
+  fontSizeSize8: NonNullable<TextStyle['fontSize']>;
   fontWeightW400: TextStyle['fontWeight'];
   fontWeightW500: TextStyle['fontWeight'];
   fontWeightW600: TextStyle['fontWeight'];
   fontWeightW700: TextStyle['fontWeight'];
   lineHeightLineHeight10: TextStyle['lineHeight'];
   lineHeightLineHeight12: TextStyle['lineHeight'];
+  lineHeightLineHeight13: TextStyle['lineHeight'];
   lineHeightLineHeight14: TextStyle['lineHeight'];
   lineHeightLineHeight15: TextStyle['lineHeight'];
   lineHeightLineHeight16: TextStyle['lineHeight'];
@@ -260,6 +264,11 @@ export interface ChatComponents {
   deviceRadius: number;
   deviceSafeAreaBottom: number;
   deviceSafeAreaTop: number;
+  emoji2xl: number;
+  emojiLg: number;
+  emojiMd: number;
+  emojiSm: number;
+  emojiXl: number;
   iconSizeLg: number;
   iconSizeMd: number;
   iconSizeSm: number;
@@ -309,14 +318,14 @@ export interface ChatPrimitives {
   spacingXxxs: number;
   typographyFontFamilyMono: TextStyle['fontFamily'];
   typographyFontFamilySans: TextStyle['fontFamily'];
-  typographyFontSize2xl: TextStyle['fontSize'];
-  typographyFontSizeLg: TextStyle['fontSize'];
-  typographyFontSizeMd: TextStyle['fontSize'];
-  typographyFontSizeMicro: TextStyle['fontSize'];
-  typographyFontSizeSm: TextStyle['fontSize'];
-  typographyFontSizeXl: TextStyle['fontSize'];
-  typographyFontSizeXs: TextStyle['fontSize'];
-  typographyFontSizeXxs: TextStyle['fontSize'];
+  typographyFontSize2xl: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeLg: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeMd: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeMicro: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeSm: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeXl: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeXs: NonNullable<TextStyle['fontSize']>;
+  typographyFontSizeXxs: NonNullable<TextStyle['fontSize']>;
   typographyFontWeightBold: TextStyle['fontWeight'];
   typographyFontWeightMedium: TextStyle['fontWeight'];
   typographyFontWeightRegular: TextStyle['fontWeight'];
@@ -359,6 +368,7 @@ export interface ChatSemantics {
   backgroundCoreScrim: ColorValue;
   backgroundCoreSelected: ColorValue;
   backgroundCoreSurface: ColorValue;
+  backgroundCoreSurfaceCard: ColorValue;
   backgroundCoreSurfaceStrong: ColorValue;
   backgroundCoreSurfaceSubtle: ColorValue;
   backgroundElevationElevation0: ColorValue;
@@ -442,6 +452,7 @@ export interface ChatSemantics {
   chatTextMention: ColorValue;
   chatTextOutgoing: ColorValue;
   chatTextReaction: ColorValue;
+  chatTextRead: ColorValue;
   chatTextSystem: ColorValue;
   chatTextTimestamp: ColorValue;
   chatTextUsername: ColorValue;
@@ -487,10 +498,8 @@ export interface ChatSemantics {
   reactionBorder: ColorValue;
   reactionEmoji: ColorValue;
   reactionText: ColorValue;
-  skeletonGradientAccentBase: ColorValue;
-  skeletonGradientAccentHighlight: ColorValue;
-  skeletonGradientDefaultBase: ColorValue;
-  skeletonGradientDefaultHighlight: ColorValue;
+  skeletonLoadingBase: ColorValue;
+  skeletonLoadingHighlight: ColorValue;
   systemBgBlur: ColorValue;
   systemCaret: ColorValue;
   systemScrollbar: ColorValue;
diff --git a/package/src/theme/generated/dark/StreamTokens.android.ts b/package/src/theme/generated/dark/StreamTokens.android.ts
index 0ade4cacf6..7110cd1d32 100644
--- a/package/src/theme/generated/dark/StreamTokens.android.ts
+++ b/package/src/theme/generated/dark/StreamTokens.android.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radius4xl,
   deviceSafeAreaBottom: foundations.spacing.space40,
   deviceSafeAreaTop: 52,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -412,17 +421,17 @@ export const components: IStreamTokens['components'] = {
 export const semantics: IStreamTokens['semantics'] = {
   accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral600,
+  accentNeutral: foundations.colors.neutral300,
   accentPrimary: '$brand500',
-  accentSuccess: foundations.colors.green400,
-  accentWarning: foundations.colors.yellow400,
+  accentSuccess: foundations.colors.green300,
+  accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.neutral700,
-  avatarPaletteBg1: foundations.colors.blue800,
-  avatarPaletteBg2: foundations.colors.cyan800,
-  avatarPaletteBg3: foundations.colors.green800,
-  avatarPaletteBg4: foundations.colors.purple800,
-  avatarPaletteBg5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue600,
+  avatarPaletteBg2: foundations.colors.cyan600,
+  avatarPaletteBg3: foundations.colors.green600,
+  avatarPaletteBg4: foundations.colors.purple600,
+  avatarPaletteBg5: foundations.colors.yellow600,
   avatarPaletteText1: foundations.colors.blue100,
   avatarPaletteText2: foundations.colors.cyan100,
   avatarPaletteText3: foundations.colors.green100,
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
   backgroundCoreSelected: 'rgba(255, 255, 255, 0.25)',
   backgroundCoreSurface: foundations.colors.neutral800,
+  backgroundCoreSurfaceCard: foundations.colors.neutral800,
   backgroundCoreSurfaceStrong: foundations.colors.neutral700,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral900,
   backgroundElevationElevation0: foundations.colors.baseBlack,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.neutral50,
-  controlProgressBarTrack: foundations.colors.neutral600,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: foundations.colors.baseWhite,
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand150',
-  skeletonGradientAccentHighlight: '$brand200',
-  skeletonGradientDefaultBase: foundations.colors.neutral800,
-  skeletonGradientDefaultHighlight: foundations.colors.neutral600,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
   systemCaret: foundations.colors.baseWhite,
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseBlack,
-  textLink: foundations.colors.baseWhite,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.neutral900,
   textPrimary: foundations.colors.baseWhite,
diff --git a/package/src/theme/generated/dark/StreamTokens.ios.ts b/package/src/theme/generated/dark/StreamTokens.ios.ts
index 698d0f79ae..b9c71e177d 100644
--- a/package/src/theme/generated/dark/StreamTokens.ios.ts
+++ b/package/src/theme/generated/dark/StreamTokens.ios.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -350,13 +354,13 @@ export const primitives: IStreamTokens['primitives'] = {
   typographyFontFamilyMono: foundations.typography.fontFamilySfMono,
   typographyFontFamilySans: foundations.typography.fontFamilySfPro,
   typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize17,
-  typographyFontSizeMd: foundations.typography.fontSizeSize15,
+  typographyFontSizeLg: foundations.typography.fontSizeSize20,
+  typographyFontSizeMd: foundations.typography.fontSizeSize17,
   typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize13,
-  typographyFontSizeXl: foundations.typography.fontSizeSize20,
-  typographyFontSizeXs: foundations.typography.fontSizeSize12,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize10,
+  typographyFontSizeSm: foundations.typography.fontSizeSize15,
+  typographyFontSizeXl: foundations.typography.fontSizeSize22,
+  typographyFontSizeXs: foundations.typography.fontSizeSize13,
+  typographyFontSizeXxs: foundations.typography.fontSizeSize12,
   typographyFontWeightBold: 700,
   typographyFontWeightMedium: 500,
   typographyFontWeightRegular: 400,
@@ -393,7 +397,12 @@ export const components: IStreamTokens['components'] = {
   composerRadiusFloating: primitives.radius3xl,
   deviceRadius: 62,
   deviceSafeAreaBottom: foundations.spacing.space32,
-  deviceSafeAreaTop: 62,
+  deviceSafeAreaTop: 50,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -412,17 +421,17 @@ export const components: IStreamTokens['components'] = {
 export const semantics: IStreamTokens['semantics'] = {
   accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral600,
+  accentNeutral: foundations.colors.neutral300,
   accentPrimary: '$brand500',
-  accentSuccess: foundations.colors.green400,
-  accentWarning: foundations.colors.yellow400,
+  accentSuccess: foundations.colors.green300,
+  accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.neutral700,
-  avatarPaletteBg1: foundations.colors.blue800,
-  avatarPaletteBg2: foundations.colors.cyan800,
-  avatarPaletteBg3: foundations.colors.green800,
-  avatarPaletteBg4: foundations.colors.purple800,
-  avatarPaletteBg5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue600,
+  avatarPaletteBg2: foundations.colors.cyan600,
+  avatarPaletteBg3: foundations.colors.green600,
+  avatarPaletteBg4: foundations.colors.purple600,
+  avatarPaletteBg5: foundations.colors.yellow600,
   avatarPaletteText1: foundations.colors.blue100,
   avatarPaletteText2: foundations.colors.cyan100,
   avatarPaletteText3: foundations.colors.green100,
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
   backgroundCoreSelected: 'rgba(255, 255, 255, 0.25)',
   backgroundCoreSurface: foundations.colors.neutral800,
+  backgroundCoreSurfaceCard: foundations.colors.neutral800,
   backgroundCoreSurfaceStrong: foundations.colors.neutral700,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral900,
   backgroundElevationElevation0: foundations.colors.baseBlack,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.neutral50,
-  controlProgressBarTrack: foundations.colors.neutral600,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: foundations.colors.baseWhite,
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand150',
-  skeletonGradientAccentHighlight: '$brand200',
-  skeletonGradientDefaultBase: foundations.colors.neutral800,
-  skeletonGradientDefaultHighlight: foundations.colors.neutral600,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
   systemCaret: foundations.colors.baseWhite,
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseBlack,
-  textLink: foundations.colors.baseWhite,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.neutral900,
   textPrimary: foundations.colors.baseWhite,
diff --git a/package/src/theme/generated/dark/StreamTokens.web.ts b/package/src/theme/generated/dark/StreamTokens.web.ts
index acaa4f9b0d..e156d00f51 100644
--- a/package/src/theme/generated/dark/StreamTokens.web.ts
+++ b/package/src/theme/generated/dark/StreamTokens.web.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radiusMd,
   deviceSafeAreaBottom: foundations.spacing.space0,
   deviceSafeAreaTop: foundations.spacing.space0,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -412,17 +421,17 @@ export const components: IStreamTokens['components'] = {
 export const semantics: IStreamTokens['semantics'] = {
   accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral600,
+  accentNeutral: foundations.colors.neutral300,
   accentPrimary: '$brand500',
-  accentSuccess: foundations.colors.green400,
-  accentWarning: foundations.colors.yellow400,
+  accentSuccess: foundations.colors.green300,
+  accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.neutral700,
-  avatarPaletteBg1: foundations.colors.blue800,
-  avatarPaletteBg2: foundations.colors.cyan800,
-  avatarPaletteBg3: foundations.colors.green800,
-  avatarPaletteBg4: foundations.colors.purple800,
-  avatarPaletteBg5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue600,
+  avatarPaletteBg2: foundations.colors.cyan600,
+  avatarPaletteBg3: foundations.colors.green600,
+  avatarPaletteBg4: foundations.colors.purple600,
+  avatarPaletteBg5: foundations.colors.yellow600,
   avatarPaletteText1: foundations.colors.blue100,
   avatarPaletteText2: foundations.colors.cyan100,
   avatarPaletteText3: foundations.colors.green100,
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
   backgroundCoreSelected: 'rgba(255, 255, 255, 0.25)',
   backgroundCoreSurface: foundations.colors.neutral800,
+  backgroundCoreSurfaceCard: foundations.colors.neutral800,
   backgroundCoreSurfaceStrong: foundations.colors.neutral700,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral900,
   backgroundElevationElevation0: foundations.colors.baseBlack,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.neutral50,
-  controlProgressBarTrack: foundations.colors.neutral600,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: foundations.colors.baseWhite,
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand150',
-  skeletonGradientAccentHighlight: '$brand200',
-  skeletonGradientDefaultBase: foundations.colors.neutral800,
-  skeletonGradientDefaultHighlight: foundations.colors.neutral600,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
   systemCaret: foundations.colors.baseWhite,
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseBlack,
-  textLink: foundations.colors.baseWhite,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.neutral900,
   textPrimary: foundations.colors.baseWhite,
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts
index 667cbacc9a..c687493303 100644
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts
+++ b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radius4xl,
   deviceSafeAreaBottom: foundations.spacing.space40,
   deviceSafeAreaTop: 52,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.baseBlack,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: '$accentBlack',
-  avatarPaletteBg1: foundations.colors.blue900,
-  avatarPaletteBg2: foundations.colors.cyan900,
-  avatarPaletteBg3: foundations.colors.green900,
-  avatarPaletteBg4: foundations.colors.purple900,
-  avatarPaletteBg5: foundations.colors.yellow900,
-  avatarPaletteText1: foundations.colors.blue100,
-  avatarPaletteText2: foundations.colors.cyan100,
-  avatarPaletteText3: foundations.colors.green100,
-  avatarPaletteText4: foundations.colors.purple100,
-  avatarPaletteText5: foundations.colors.yellow100,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$textOnDark',
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: '$backgroundCoreSurfaceStrong',
   backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)',
   backgroundCoreSurface: foundations.colors.neutral150,
+  backgroundCoreSurfaceCard: foundations.colors.neutral100,
   backgroundCoreSurfaceStrong: foundations.colors.neutral200,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral100,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,13 +550,13 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentBlack',
+  controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
   controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand200',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate200,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: foundations.colors.baseWhite,
   systemCaret: foundations.colors.baseBlack,
   systemScrollbar: foundations.colors.baseBlack,
   systemText: foundations.colors.baseBlack,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseWhite,
-  textLink: foundations.colors.baseBlack,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.baseWhite,
   textPrimary: foundations.colors.baseBlack,
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts
index ab1b310708..70c26d120a 100644
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts
+++ b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -350,13 +354,13 @@ export const primitives: IStreamTokens['primitives'] = {
   typographyFontFamilyMono: foundations.typography.fontFamilySfMono,
   typographyFontFamilySans: foundations.typography.fontFamilySfPro,
   typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize17,
-  typographyFontSizeMd: foundations.typography.fontSizeSize15,
+  typographyFontSizeLg: foundations.typography.fontSizeSize20,
+  typographyFontSizeMd: foundations.typography.fontSizeSize17,
   typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize13,
-  typographyFontSizeXl: foundations.typography.fontSizeSize20,
-  typographyFontSizeXs: foundations.typography.fontSizeSize12,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize10,
+  typographyFontSizeSm: foundations.typography.fontSizeSize15,
+  typographyFontSizeXl: foundations.typography.fontSizeSize22,
+  typographyFontSizeXs: foundations.typography.fontSizeSize13,
+  typographyFontSizeXxs: foundations.typography.fontSizeSize12,
   typographyFontWeightBold: 700,
   typographyFontWeightMedium: 500,
   typographyFontWeightRegular: 400,
@@ -393,7 +397,12 @@ export const components: IStreamTokens['components'] = {
   composerRadiusFloating: primitives.radius3xl,
   deviceRadius: 62,
   deviceSafeAreaBottom: foundations.spacing.space32,
-  deviceSafeAreaTop: 62,
+  deviceSafeAreaTop: 50,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.baseBlack,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: '$accentBlack',
-  avatarPaletteBg1: foundations.colors.blue900,
-  avatarPaletteBg2: foundations.colors.cyan900,
-  avatarPaletteBg3: foundations.colors.green900,
-  avatarPaletteBg4: foundations.colors.purple900,
-  avatarPaletteBg5: foundations.colors.yellow900,
-  avatarPaletteText1: foundations.colors.blue100,
-  avatarPaletteText2: foundations.colors.cyan100,
-  avatarPaletteText3: foundations.colors.green100,
-  avatarPaletteText4: foundations.colors.purple100,
-  avatarPaletteText5: foundations.colors.yellow100,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$textOnDark',
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: '$backgroundCoreSurfaceStrong',
   backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)',
   backgroundCoreSurface: foundations.colors.neutral150,
+  backgroundCoreSurfaceCard: foundations.colors.neutral100,
   backgroundCoreSurfaceStrong: foundations.colors.neutral200,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral100,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,13 +550,13 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentBlack',
+  controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
   controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand200',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate200,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: foundations.colors.baseWhite,
   systemCaret: foundations.colors.baseBlack,
   systemScrollbar: foundations.colors.baseBlack,
   systemText: foundations.colors.baseBlack,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseWhite,
-  textLink: foundations.colors.baseBlack,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.baseWhite,
   textPrimary: foundations.colors.baseBlack,
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts
index f445fca0b4..ddcc2de26e 100644
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts
+++ b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radiusMd,
   deviceSafeAreaBottom: foundations.spacing.space0,
   deviceSafeAreaTop: foundations.spacing.space0,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.baseBlack,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: '$accentBlack',
-  avatarPaletteBg1: foundations.colors.blue900,
-  avatarPaletteBg2: foundations.colors.cyan900,
-  avatarPaletteBg3: foundations.colors.green900,
-  avatarPaletteBg4: foundations.colors.purple900,
-  avatarPaletteBg5: foundations.colors.yellow900,
-  avatarPaletteText1: foundations.colors.blue100,
-  avatarPaletteText2: foundations.colors.cyan100,
-  avatarPaletteText3: foundations.colors.green100,
-  avatarPaletteText4: foundations.colors.purple100,
-  avatarPaletteText5: foundations.colors.yellow100,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$textOnDark',
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: '$backgroundCoreSurfaceStrong',
   backgroundCoreSelected: 'rgba(0, 0, 0, 0.2)',
   backgroundCoreSurface: foundations.colors.neutral150,
+  backgroundCoreSurfaceCard: foundations.colors.neutral100,
   backgroundCoreSurfaceStrong: foundations.colors.neutral200,
   backgroundCoreSurfaceSubtle: foundations.colors.neutral100,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,13 +550,13 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentBlack',
+  controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
   controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
@@ -570,17 +581,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand200',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate200,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: foundations.colors.baseWhite,
   systemCaret: foundations.colors.baseBlack,
   systemScrollbar: foundations.colors.baseBlack,
   systemText: foundations.colors.baseBlack,
   textDisabled: foundations.colors.neutral500,
   textInverse: foundations.colors.baseWhite,
-  textLink: foundations.colors.baseBlack,
+  textLink: '$accentPrimary',
   textOnAccent: foundations.colors.baseWhite,
   textOnDark: foundations.colors.baseWhite,
   textPrimary: foundations.colors.baseBlack,
diff --git a/package/src/theme/generated/light/StreamTokens.android.ts b/package/src/theme/generated/light/StreamTokens.android.ts
index 19a03439d8..7b0558b578 100644
--- a/package/src/theme/generated/light/StreamTokens.android.ts
+++ b/package/src/theme/generated/light/StreamTokens.android.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radius4xl,
   deviceSafeAreaBottom: foundations.spacing.space40,
   deviceSafeAreaTop: 52,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.slate100,
-  avatarPaletteBg1: foundations.colors.blue100,
-  avatarPaletteBg2: foundations.colors.cyan100,
-  avatarPaletteBg3: foundations.colors.green100,
-  avatarPaletteBg4: foundations.colors.purple100,
-  avatarPaletteBg5: foundations.colors.yellow100,
-  avatarPaletteText1: foundations.colors.blue800,
-  avatarPaletteText2: foundations.colors.cyan800,
-  avatarPaletteText3: foundations.colors.green800,
-  avatarPaletteText4: foundations.colors.purple800,
-  avatarPaletteText5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: foundations.colors.slate500,
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)',
   backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)',
   backgroundCoreSurface: foundations.colors.slate100,
+  backgroundCoreSurfaceCard: foundations.colors.slate50,
   backgroundCoreSurfaceStrong: foundations.colors.slate150,
   backgroundCoreSurfaceSubtle: foundations.colors.slate50,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.slate500,
-  controlProgressBarTrack: foundations.colors.slate200,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,10 +581,8 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand50',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate50,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
diff --git a/package/src/theme/generated/light/StreamTokens.ios.ts b/package/src/theme/generated/light/StreamTokens.ios.ts
index 97484fcb9c..e4873abe25 100644
--- a/package/src/theme/generated/light/StreamTokens.ios.ts
+++ b/package/src/theme/generated/light/StreamTokens.ios.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -350,13 +354,13 @@ export const primitives: IStreamTokens['primitives'] = {
   typographyFontFamilyMono: foundations.typography.fontFamilySfMono,
   typographyFontFamilySans: foundations.typography.fontFamilySfPro,
   typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize17,
-  typographyFontSizeMd: foundations.typography.fontSizeSize15,
+  typographyFontSizeLg: foundations.typography.fontSizeSize20,
+  typographyFontSizeMd: foundations.typography.fontSizeSize17,
   typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize13,
-  typographyFontSizeXl: foundations.typography.fontSizeSize20,
-  typographyFontSizeXs: foundations.typography.fontSizeSize12,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize10,
+  typographyFontSizeSm: foundations.typography.fontSizeSize15,
+  typographyFontSizeXl: foundations.typography.fontSizeSize22,
+  typographyFontSizeXs: foundations.typography.fontSizeSize13,
+  typographyFontSizeXxs: foundations.typography.fontSizeSize12,
   typographyFontWeightBold: 700,
   typographyFontWeightMedium: 500,
   typographyFontWeightRegular: 400,
@@ -393,7 +397,12 @@ export const components: IStreamTokens['components'] = {
   composerRadiusFloating: primitives.radius3xl,
   deviceRadius: 62,
   deviceSafeAreaBottom: foundations.spacing.space32,
-  deviceSafeAreaTop: 62,
+  deviceSafeAreaTop: 50,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.slate100,
-  avatarPaletteBg1: foundations.colors.blue100,
-  avatarPaletteBg2: foundations.colors.cyan100,
-  avatarPaletteBg3: foundations.colors.green100,
-  avatarPaletteBg4: foundations.colors.purple100,
-  avatarPaletteBg5: foundations.colors.yellow100,
-  avatarPaletteText1: foundations.colors.blue800,
-  avatarPaletteText2: foundations.colors.cyan800,
-  avatarPaletteText3: foundations.colors.green800,
-  avatarPaletteText4: foundations.colors.purple800,
-  avatarPaletteText5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: foundations.colors.slate500,
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)',
   backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)',
   backgroundCoreSurface: foundations.colors.slate100,
+  backgroundCoreSurfaceCard: foundations.colors.slate50,
   backgroundCoreSurfaceStrong: foundations.colors.slate150,
   backgroundCoreSurfaceSubtle: foundations.colors.slate50,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.slate500,
-  controlProgressBarTrack: foundations.colors.slate200,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,10 +581,8 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand50',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate50,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
diff --git a/package/src/theme/generated/light/StreamTokens.web.ts b/package/src/theme/generated/light/StreamTokens.web.ts
index 950de67f7b..77bcdf92dd 100644
--- a/package/src/theme/generated/light/StreamTokens.web.ts
+++ b/package/src/theme/generated/light/StreamTokens.web.ts
@@ -193,24 +193,28 @@ export const foundations: IStreamTokens['foundations'] = {
     fontWeightW500: '500',
     fontWeightW600: '600',
     fontWeightW700: '700',
+    fontSizeSize8: 8,
     fontSizeSize10: 10,
+    fontSizeSize11: 11,
     fontSizeSize12: 12,
+    fontSizeSize13: 13,
     fontSizeSize14: 14,
     fontSizeSize16: 16,
     fontSizeSize15: 15,
     fontSizeSize17: 17,
     fontSizeSize18: 18,
     fontSizeSize20: 20,
+    fontSizeSize22: 22,
     fontSizeSize24: 24,
     fontSizeSize28: 28,
     fontSizeSize32: 32,
     fontSizeSize40: 40,
     fontSizeSize48: 48,
-    fontSizeSize13: 13,
-    fontSizeSize8: 8,
+    fontSizeSize64: 64,
     lineHeightLineHeight8: 8,
     lineHeightLineHeight10: 10,
     lineHeightLineHeight12: 12,
+    lineHeightLineHeight13: 13,
     lineHeightLineHeight14: 14,
     lineHeightLineHeight15: 15,
     lineHeightLineHeight16: 16,
@@ -394,6 +398,11 @@ export const components: IStreamTokens['components'] = {
   deviceRadius: primitives.radiusMd,
   deviceSafeAreaBottom: foundations.spacing.space0,
   deviceSafeAreaTop: foundations.spacing.space0,
+  emoji2xl: foundations.typography.fontSizeSize64,
+  emojiLg: foundations.typography.fontSizeSize32,
+  emojiMd: foundations.typography.fontSizeSize24,
+  emojiSm: primitives.typographyFontSizeMd,
+  emojiXl: foundations.typography.fontSizeSize48,
   iconSizeLg: foundations.layout.size32,
   iconSizeMd: foundations.layout.size20,
   iconSizeSm: foundations.layout.size16,
@@ -418,16 +427,16 @@ export const semantics: IStreamTokens['semantics'] = {
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
   avatarBgPlaceholder: foundations.colors.slate100,
-  avatarPaletteBg1: foundations.colors.blue100,
-  avatarPaletteBg2: foundations.colors.cyan100,
-  avatarPaletteBg3: foundations.colors.green100,
-  avatarPaletteBg4: foundations.colors.purple100,
-  avatarPaletteBg5: foundations.colors.yellow100,
-  avatarPaletteText1: foundations.colors.blue800,
-  avatarPaletteText2: foundations.colors.cyan800,
-  avatarPaletteText3: foundations.colors.green800,
-  avatarPaletteText4: foundations.colors.purple800,
-  avatarPaletteText5: foundations.colors.yellow800,
+  avatarPaletteBg1: foundations.colors.blue150,
+  avatarPaletteBg2: foundations.colors.cyan150,
+  avatarPaletteBg3: foundations.colors.green150,
+  avatarPaletteBg4: foundations.colors.purple150,
+  avatarPaletteBg5: foundations.colors.yellow150,
+  avatarPaletteText1: foundations.colors.blue900,
+  avatarPaletteText2: foundations.colors.cyan900,
+  avatarPaletteText3: foundations.colors.green900,
+  avatarPaletteText4: foundations.colors.purple900,
+  avatarPaletteText5: foundations.colors.yellow900,
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: foundations.colors.slate500,
   backgroundCoreApp: '$backgroundElevationElevation0',
@@ -442,6 +451,7 @@ export const semantics: IStreamTokens['semantics'] = {
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.25)',
   backgroundCoreSelected: 'rgba(30, 37, 43, 0.15)',
   backgroundCoreSurface: foundations.colors.slate100,
+  backgroundCoreSurfaceCard: foundations.colors.slate50,
   backgroundCoreSurfaceStrong: foundations.colors.slate150,
   backgroundCoreSurfaceSubtle: foundations.colors.slate50,
   backgroundElevationElevation0: foundations.colors.baseWhite,
@@ -525,6 +535,7 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextMention: '$textLink',
   chatTextOutgoing: '$brand900',
   chatTextReaction: '$textSecondary',
+  chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
   chatTextUsername: '$textSecondary',
@@ -539,15 +550,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlPlaybackToggleText: '$textPrimary',
   controlPlayControlBg: '$accentBlack',
   controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: foundations.colors.slate500,
-  controlProgressBarTrack: foundations.colors.slate200,
+  controlProgressBarFill: '$accentNeutral',
+  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
   controlRadiocheckBg: foundations.colors.baseTransparent0,
   controlRadiocheckBgSelected: '$accentPrimary',
   controlRadiocheckBorder: '$borderCoreDefault',
   controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$accentBlack',
+  controlRemoveControlBg: '$backgroundCoreInverse',
   controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnAccent',
+  controlRemoveControlIcon: '$textOnDark',
   controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
   controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
@@ -570,10 +581,8 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
-  skeletonGradientAccentBase: '$brand50',
-  skeletonGradientAccentHighlight: foundations.colors.baseWhite,
-  skeletonGradientDefaultBase: foundations.colors.slate50,
-  skeletonGradientDefaultHighlight: foundations.colors.baseWhite,
+  skeletonLoadingBase: foundations.colors.baseTransparent0,
+  skeletonLoadingHighlight: foundations.colors.baseWhite,
   systemBgBlur: 'rgba(255, 255, 255, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',

From 6c2aab664452a2aa2f7186ef4575d7fd7ba0e87f Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 14:20:53 +0100
Subject: [PATCH 05/16] feat: implement full results screen

---
 .../PollResults/PollOptionFullResults.tsx     | 83 +++++++++++++------
 .../components/PollResults/PollResultItem.tsx | 14 ++--
 .../src/contexts/themeContext/utils/theme.ts  |  2 +
 3 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx b/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
index 0b81cb2bbc..77a64f6e15 100644
--- a/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
+++ b/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
 
 import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
@@ -12,6 +12,7 @@ import {
   useTranslationContext,
 } from '../../../../contexts';
 
+import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
 import { usePollState } from '../../hooks/usePollState';
 
@@ -35,32 +36,40 @@ export const PollOptionFullResultsContent = ({
 
   const {
     theme: {
-      colors: { bg_user, black, white },
       poll: {
-        fullResults: { container, contentContainer, headerContainer, headerText },
+        fullResults: { container, contentContainer, headerContainer, headerText, headerTitle },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const PollOptionFullResultsHeader = useCallback(
     () => (
       <View style={[styles.headerContainer, headerContainer]}>
-        <Text style={[styles.headerText, { color: black }, headerText]}>
+        <Text style={[styles.headerTitle, headerTitle]}>{option.text}</Text>
+        <Text style={[styles.headerText, headerText]}>
           {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
         </Text>
       </View>
     ),
-    [black, headerContainer, headerText, option.id, t, voteCountsByOption],
+    [
+      headerContainer,
+      headerText,
+      headerTitle,
+      option.id,
+      option.text,
+      styles.headerContainer,
+      styles.headerText,
+      styles.headerTitle,
+      t,
+      voteCountsByOption,
+    ],
   );
 
   return (
-    <View style={[styles.container, { backgroundColor: white }, container]}>
+    <View style={[styles.container, container]}>
       <FlatList
-        contentContainerStyle={[
-          styles.contentContainer,
-          { backgroundColor: bg_user },
-          contentContainer,
-        ]}
+        contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={votes}
         keyExtractor={(item) => `option_full_results_${item.id}`}
         ListHeaderComponent={PollOptionFullResultsHeader}
@@ -91,16 +100,42 @@ export const PollOptionFullResults = ({
   </PollContextProvider>
 );
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  contentContainer: {
-    borderRadius: 12,
-    marginBottom: 8,
-    marginHorizontal: 16,
-    marginTop: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  headerContainer: { flexDirection: 'row', justifyContent: 'flex-end', marginBottom: 8 },
-  headerText: { fontSize: 16, marginLeft: 16 },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: { flex: 1, padding: primitives.spacingMd },
+        contentContainer: {
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
+          borderRadius: primitives.radiusLg,
+          marginBottom: primitives.spacingMd,
+          padding: primitives.spacingMd,
+        },
+        headerContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingBottom: primitives.spacingXs,
+        },
+        headerTitle: {
+          flex: 1,
+          fontSize: primitives.typographyFontSizeLg,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          paddingTop: primitives.spacingXs,
+        },
+        headerText: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+          marginLeft: primitives.spacingMd,
+        },
+      }),
+    [],
+  );
+};
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index b45b101d50..61c92aa364 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -49,11 +49,7 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
     setShowAllVotes(true);
   }, [message, onPress, option, poll]);
 
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
+  const styles = useStyles();
 
   return (
     <>
@@ -68,8 +64,8 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
           onRequestClose={() => setShowAllVotes(false)}
           visible={showAllVotes}
         >
-          <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
-            <PollModalHeader onPress={() => setShowAllVotes(false)} title={option.text} />
+          <SafeAreaViewWrapper style={styles.safeArea}>
+            <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
             <PollOptionFullResults message={message} option={option} poll={poll} />
           </SafeAreaViewWrapper>
         </Modal>
@@ -161,6 +157,10 @@ const useStyles = () => {
           color: semantics.textPrimary,
           marginLeft: primitives.spacingMd,
         },
+        safeArea: {
+          backgroundColor: semantics.backgroundElevationElevation1,
+          flex: 1,
+        },
       }),
     [semantics],
   );
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index cb52979802..3da5a68719 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -837,6 +837,7 @@ export type Theme = {
       contentContainer: ViewStyle;
       headerContainer: ViewStyle;
       headerText: TextStyle;
+      headerTitle: TextStyle;
     };
     inputDialog: {
       button: TextStyle;
@@ -1675,6 +1676,7 @@ export const defaultTheme: Theme = {
       contentContainer: {},
       headerContainer: {},
       headerText: {},
+      headerTitle: {},
     },
     inputDialog: {
       button: {},

From 443a84e2856be68f539cced851227420ca78deae Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 15:28:31 +0100
Subject: [PATCH 06/16] feat: implement full options list

---
 .../components/Poll/components/PollOption.tsx | 75 ++++++++++++-------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/package/src/components/Poll/components/PollOption.tsx b/package/src/components/Poll/components/PollOption.tsx
index 9673b5ddac..83dac6f79d 100644
--- a/package/src/components/Poll/components/PollOption.tsx
+++ b/package/src/components/Poll/components/PollOption.tsx
@@ -40,25 +40,21 @@ export const PollAllOptionsContent = ({
 
   const {
     theme: {
-      colors: { bg_user, black, white },
       poll: {
         allOptions: { listContainer, titleContainer, titleText, wrapper },
       },
     },
   } = useTheme();
+  const styles = useAllOptionStyles();
 
   return (
-    <ScrollView
-      contentContainerStyle={{ paddingBottom: 70 }}
-      style={[styles.allOptionsWrapper, { backgroundColor: white }, wrapper]}
-      {...additionalScrollViewProps}
-    >
-      <View style={[styles.allOptionsTitleContainer, { backgroundColor: bg_user }, titleContainer]}>
-        <Text style={[styles.allOptionsTitleText, { color: black }, titleText]}>{name}</Text>
+    <ScrollView style={[styles.allOptionsWrapper, wrapper]} {...additionalScrollViewProps}>
+      <View style={[styles.allOptionsTitleContainer, titleContainer]}>
+        <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
       </View>
-      <View style={[styles.allOptionsListContainer, { backgroundColor: bg_user }, listContainer]}>
+      <View style={[styles.allOptionsListContainer, listContainer]}>
         {options?.map((option: PollOptionClass) => (
-          <View key={`full_poll_options_${option.id}`} style={{ paddingVertical: 16 }}>
+          <View key={`full_poll_options_${option.id}`} style={styles.optionWrapper}>
             <PollOption key={option.id} option={option} showProgressBar={false} />
           </View>
         ))}
@@ -134,15 +130,15 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
             <Text style={[styles.votesText, votesText]}>{voteCountsByOption[option.id] || 0}</Text>
           </View>
         </View>
-        <View style={styles.progressBarContainer}>
-          {showProgressBar ? (
+        {showProgressBar ? (
+          <View style={styles.progressBarContainer}>
             <ProgressBar
               progress={votes / maxVotes}
               filledColor={filledColor}
               emptyColor={unFilledColor}
             />
-          ) : null}
-        </View>
+          </View>
+        ) : null}
       </View>
     </View>
   );
@@ -256,18 +252,39 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-const styles = StyleSheet.create({
-  allOptionsListContainer: {
-    borderRadius: 12,
-    marginTop: 32,
-    paddingBottom: 18,
-    paddingHorizontal: 16,
-  },
-  allOptionsTitleContainer: {
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 18,
-  },
-  allOptionsTitleText: { fontSize: 16, fontWeight: '500' },
-  allOptionsWrapper: { flex: 1, marginBottom: 16, padding: 16 },
-});
+const useAllOptionStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        allOptionsListContainer: {
+          borderRadius: primitives.radiusLg,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
+          marginTop: primitives.spacing2xl,
+        },
+        allOptionsTitleContainer: {
+          borderRadius: primitives.radiusLg,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
+        },
+        allOptionsTitleText: {
+          fontSize: primitives.typographyFontSizeLg,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+        },
+        allOptionsWrapper: {
+          flex: 1,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundElevationElevation1,
+        },
+        optionWrapper: {
+          paddingVertical: primitives.spacingMd,
+        },
+      }),
+    [semantics],
+  );
+};

From 4e46d8c90e6911285007ae31d13614e5402d37f1 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 15:53:52 +0100
Subject: [PATCH 07/16] feat: implement answers list

---
 .../Poll/components/PollAnswersList.tsx       | 124 ++++++++++--------
 .../Poll/components/PollModalHeader.tsx       |   2 +-
 .../src/contexts/themeContext/utils/theme.ts  |   4 +-
 3 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/package/src/components/Poll/components/PollAnswersList.tsx b/package/src/components/Poll/components/PollAnswersList.tsx
index e6c290985d..12ab7c1f89 100644
--- a/package/src/components/Poll/components/PollAnswersList.tsx
+++ b/package/src/components/Poll/components/PollAnswersList.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { FlatList, type FlatListProps, Pressable, StyleSheet, Text, View } from 'react-native';
+import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
 
 import { PollAnswer, VotingVisibility } from 'stream-chat';
 
@@ -13,7 +13,9 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
+import { Button } from '../../ui';
 import { UserAvatar } from '../../ui/Avatar/UserAvatar';
 import { usePollAnswersPagination } from '../hooks/usePollAnswersPagination';
 import { usePollState } from '../hooks/usePollState';
@@ -34,31 +36,15 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
     setShowAddCommentDialog(true);
   }, [message, onPress, poll]);
 
-  const {
-    theme: {
-      colors: { accent_dark_blue, bg_user },
-      poll: {
-        answersList: { buttonContainer },
-        button: { text },
-      },
-    },
-  } = useTheme();
-
   return (
     <>
-      <Pressable
+      <Button
+        variant={'secondary'}
+        type={'outline'}
+        size={'lg'}
+        label={ownAnswer ? t('Update your comment') : t('Add a comment')}
         onPress={onPressHandler}
-        style={({ pressed }) => [
-          { opacity: pressed ? 0.5 : 1 },
-          styles.addCommentButtonContainer,
-          { backgroundColor: bg_user },
-          buttonContainer,
-        ]}
-      >
-        <Text style={[styles.addCommentButtonText, { color: accent_dark_blue }, text]}>
-          {ownAnswer ? t('Update your comment') : t('Add a comment')}
-        </Text>
-      </Pressable>
+      />
       {showAddCommentDialog ? (
         <PollInputDialog
           closeDialog={() => setShowAddCommentDialog(false)}
@@ -83,12 +69,12 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
 
   const {
     theme: {
-      colors: { bg_user, black },
       poll: {
         answersList: { item: itemStyle },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const dateString = useMemo(
     () =>
@@ -107,20 +93,18 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
   );
 
   return (
-    <View style={[styles.listItemContainer, { backgroundColor: bg_user }, itemStyle.container]}>
-      <Text style={[styles.listItemAnswerText, { color: black }, itemStyle.answerText]}>
-        {answer.answer_text}
-      </Text>
+    <View style={[styles.listItemContainer, itemStyle.container]}>
+      <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
       <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
         <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
           {!isAnonymous && answer.user?.image ? (
-            <UserAvatar user={answer.user} size='xs' showBorder />
+            <UserAvatar user={answer.user} size='md' showBorder />
           ) : null}
-          <Text style={{ color: black, fontSize: 14, marginLeft: 2 }}>
+          <Text style={styles.listItemInfoUserName}>
             {isAnonymous ? t('Anonymous') : answer.user?.name}
           </Text>
         </View>
-        <Text style={{ color: black }}>{dateString}</Text>
+        <Text style={styles.listItemInfoDate}>{dateString}</Text>
       </View>
     </View>
   );
@@ -136,18 +120,19 @@ export const PollAnswersListContent = ({
   const { hasNextPage, loadMore, pollAnswers } = usePollAnswersPagination();
   const {
     theme: {
-      colors: { white },
       poll: {
-        answersList: { container },
+        answersList: { container, contentContainer },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
-    <View style={[styles.container, { backgroundColor: white }, container]}>
+    <View style={[styles.container, container]}>
       <FlatList
         data={pollAnswers}
         keyExtractor={(item) => `poll_answer_${item.id}`}
+        contentContainerStyle={[styles.contentContainer, contentContainer]}
         onEndReached={() => hasNextPage && loadMore()}
         renderItem={renderPollAnswerListItem}
         {...additionalFlatListProps}
@@ -172,23 +157,54 @@ export const PollAnswersList = ({
   </PollContextProvider>
 );
 
-const styles = StyleSheet.create({
-  addCommentButtonContainer: {
-    alignItems: 'center',
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 18,
-  },
-  addCommentButtonText: { fontSize: 16 },
-  container: { flex: 1, margin: 16 },
-  listItemAnswerText: { fontSize: 16, fontWeight: '500' },
-  listItemContainer: {
-    borderRadius: 12,
-    marginBottom: 8,
-    paddingBottom: 20,
-    paddingHorizontal: 16,
-    paddingTop: 12,
-  },
-  listItemInfoContainer: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 },
-  listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        addCommentButtonContainer: {
+          alignItems: 'center',
+          borderRadius: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 18,
+        },
+        contentContainer: { gap: primitives.spacingMd },
+        addCommentButtonText: { fontSize: 16 },
+        container: {
+          flex: 1,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundElevationElevation1,
+        },
+        listItemAnswerText: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightRelaxed,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          color: semantics.textPrimary,
+        },
+        listItemContainer: {
+          borderRadius: primitives.radiusLg,
+          padding: primitives.spacingMd,
+          backgroundColor: semantics.backgroundCoreSurfaceCard,
+        },
+        listItemInfoContainer: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: 24,
+        },
+        listItemInfoUserName: {
+          color: semantics.textPrimary,
+          fontSize: primitives.typographyFontSizeSm,
+          marginLeft: primitives.spacingXxs,
+        },
+        listItemInfoDate: {
+          fontSize: primitives.typographyFontSizeSm,
+          color: semantics.textTertiary,
+        },
+        listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' },
+      }),
+    [semantics],
+  );
+};
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 5b73a83bd0..8ca9514885 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -61,7 +61,7 @@ const useStyles = () => {
         },
         centerContainer: {
           alignItems: 'center',
-          flex: 1,
+          flex: 2,
           justifyContent: 'center',
         },
         sideContainer: {
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 3da5a68719..886e9e4790 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -762,8 +762,8 @@ export type Theme = {
       wrapper: ViewStyle;
     };
     answersList: {
-      buttonContainer: ViewStyle;
       container: ViewStyle;
+      contentContainer: ViewStyle;
       item: {
         answerText: TextStyle;
         container: ViewStyle;
@@ -1601,8 +1601,8 @@ export const defaultTheme: Theme = {
       wrapper: {},
     },
     answersList: {
-      buttonContainer: {},
       container: {},
+      contentContainer: {},
       item: {
         answerText: {},
         container: {},

From 7818ae2de987a1ce876fe111c9296de38edc0fcc Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 15:56:59 +0100
Subject: [PATCH 08/16] fix: animations of poll dialog

---
 .../src/components/Poll/components/PollInputDialog.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/package/src/components/Poll/components/PollInputDialog.tsx b/package/src/components/Poll/components/PollInputDialog.tsx
index 602e782542..b6e761bbcc 100644
--- a/package/src/components/Poll/components/PollInputDialog.tsx
+++ b/package/src/components/Poll/components/PollInputDialog.tsx
@@ -10,6 +10,8 @@ import {
   View,
 } from 'react-native';
 
+import Animated, { LinearTransition, ZoomIn } from 'react-native-reanimated';
+
 import { useTheme, useTranslationContext } from '../../../contexts';
 
 export type PollInputDialogProps = {
@@ -52,7 +54,11 @@ export const PollInputDialog = ({
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={[styles.transparentContainer, transparentContainer]}
       >
-        <View style={[styles.container, { backgroundColor: white }, container]}>
+        <Animated.View
+          entering={ZoomIn.duration(200)}
+          layout={LinearTransition.duration(200)}
+          style={[styles.container, { backgroundColor: white }, container]}
+        >
           <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
           <TextInput
             autoFocus={true}
@@ -80,7 +86,7 @@ export const PollInputDialog = ({
               <Text style={[styles.button, { color: accent_dark_blue }, button]}>{t('SEND')}</Text>
             </Pressable>
           </View>
-        </View>
+        </Animated.View>
       </KeyboardAvoidingView>
     </Modal>
   );

From 8a36186173637e136343a2c60640d123d7ea524b Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:05:51 +0100
Subject: [PATCH 09/16] fix: create poll icon

---
 .../Poll/components/CreatePollHeader.tsx      | 22 +++++++------------
 .../Poll/components/PollModalHeader.tsx       |  2 +-
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index 0b011f679c..c0e662c09a 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -1,9 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { IconProps, SendPoll } from '../../../icons';
+import { Check, IconProps } from '../../../icons';
 import { NewCross } from '../../../icons/NewCross';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
@@ -41,18 +41,12 @@ export const CreatePollHeader = ({
   } = useTheme();
   const styles = useStyles();
 
-  const renderSendPollIcon = (props: IconProps) => {
-    return (
-      <SendPoll
-        {...props}
-        height={18}
-        fill={semantics.textOnAccent}
-        width={18}
-        stroke={'none'}
-        strokeWidth={0}
-      />
-    );
-  };
+  const renderSendPollIcon = useCallback(
+    (props: IconProps) => {
+      return <Check {...props} height={18} stroke={semantics.textOnAccent} width={18} />;
+    },
+    [semantics.textOnAccent],
+  );
 
   return (
     <View style={[styles.headerContainer, headerContainer]}>
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 8ca9514885..4e274d6852 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -26,7 +26,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
       <View style={styles.sideContainer}>
         <Button
           variant='secondary'
-          type='outline'
+          type='solid'
           size='md'
           iconOnly
           LeadingIcon={NewCross}

From 215631a0ae422d08303714368c730e8003495709 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:10:31 +0100
Subject: [PATCH 10/16] fix: update translation

---
 package/src/components/Poll/CreatePollContent.tsx | 2 +-
 package/src/i18n/en.json                          | 2 +-
 package/src/i18n/es.json                          | 2 +-
 package/src/i18n/fr.json                          | 2 +-
 package/src/i18n/he.json                          | 2 +-
 package/src/i18n/hi.json                          | 2 +-
 package/src/i18n/it.json                          | 2 +-
 package/src/i18n/ja.json                          | 2 +-
 package/src/i18n/ko.json                          | 2 +-
 package/src/i18n/nl.json                          | 2 +-
 package/src/i18n/pt-br.json                       | 2 +-
 package/src/i18n/ru.json                          | 2 +-
 package/src/i18n/tr.json                          | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
index 6e2c9e532d..dd186b94f2 100644
--- a/package/src/components/Poll/CreatePollContent.tsx
+++ b/package/src/components/Poll/CreatePollContent.tsx
@@ -157,7 +157,7 @@ export const CreatePollContent = () => {
           <MultipleAnswersField />
           <View style={[styles.optionCard, anonymousPoll.wrapper]}>
             <View style={[styles.optionCardContent, anonymousPoll.optionCardContent]}>
-              <Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous poll')}</Text>
+              <Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous voting')}</Text>
               <Text style={[styles.description, anonymousPoll.description]}>Hide who voted</Text>
             </View>
 
diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json
index 87309ebc57..e0f34c4d7a 100644
--- a/package/src/i18n/en.json
+++ b/package/src/i18n/en.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Allow camera access in device settings",
   "Also send to channel": "Also send to channel",
   "Anonymous": "Anonymous",
-  "Anonymous poll": "Anonymous poll",
+  "Anonymous voting": "Anonymous voting",
   "Are you sure you want to permanently delete this message?": "Are you sure you want to permanently delete this message?",
   "Are you sure?": "Are you sure?",
   "Ask a question": "Ask a question",
diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json
index 3e7736a443..aa793f81cf 100644
--- a/package/src/i18n/es.json
+++ b/package/src/i18n/es.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Permitir el acceso a la cámara en la configuración del dispositivo",
   "Also send to channel": "También enviar al canal",
   "Anonymous": "Anónimo",
-  "Anonymous poll": "Encuesta anónima",
+  "Anonymous voting": "Encuesta anónima",
   "Are you sure you want to permanently delete this message?": "¿Estás seguro de que deseas eliminar permanentemente este mensaje?",
   "Are you sure?": "¿Estás seguro?",
   "Ask a question": "Hacer una pregunta",
diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json
index 6feee0bff3..3e0879588d 100644
--- a/package/src/i18n/fr.json
+++ b/package/src/i18n/fr.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Autoriser l'accès à la caméra dans les paramètres de l'appareil",
   "Also send to channel": "Envoyer également à la chaîne",
   "Anonymous": "Anonyme",
-  "Anonymous poll": "Sondage anonyme",
+  "Anonymous voting": "Sondage anonyme",
   "Are you sure you want to permanently delete this message?": "Êtes-vous sûr de vouloir supprimer définitivement ce message?",
   "Are you sure?": "Es-tu sûr ?",
   "Ask a question": "Poser une question",
diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json
index b787653b65..f05d16ee0c 100644
--- a/package/src/i18n/he.json
+++ b/package/src/i18n/he.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "אפשר גישה למצלמה בהגדרות המכשיר",
   "Also send to channel": "שלח/י הודעה לשיחה",
   "Anonymous": "אנונימי",
-  "Anonymous poll": "סקר אנונימי",
+  "Anonymous voting": "סקר אנונימי",
   "Are you sure you want to permanently delete this message?": "האם את/ה בטוח/ה שאת/ה רוצה למחוק את ההודעה הזו לצמיתות?",
   "Are you sure?": "האם אתה בטוח?",
   "Ask a question": "שאל שאלה",
diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json
index 47927bfe6d..ca04faffb6 100644
--- a/package/src/i18n/hi.json
+++ b/package/src/i18n/hi.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "डिवाइस सेटिंग्स में कैमरा एक्सेस की अनुमति दें",
   "Also send to channel": "चैनल को भी भेजें",
   "Anonymous": "गुमनाम",
-  "Anonymous poll": "अनाम सर्वेक्षण",
+  "Anonymous voting": "अनाम सर्वेक्षण",
   "Are you sure you want to permanently delete this message?": "क्या आप वाकई इस संदेश को स्थायी रूप से हटाना चाहते हैं?",
   "Are you sure?": "क्या आप सुनिश्चित हैं?",
   "Ask a question": "एक प्रश्न पूछें",
diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json
index 162b552c02..51e8e13042 100644
--- a/package/src/i18n/it.json
+++ b/package/src/i18n/it.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Consenti l'accesso alla fotocamera nelle impostazioni del dispositivo",
   "Also send to channel": "Invia anche al canale",
   "Anonymous": "Anonimo",
-  "Anonymous poll": "Sondaggio anonimo",
+  "Anonymous voting": "Sondaggio anonimo",
   "Are you sure you want to permanently delete this message?": "Sei sicuro di voler eliminare definitivamente questo messaggio?",
   "Are you sure?": "Sei sicuro?",
   "Ask a question": "Fai una domanda",
diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json
index c31f9ec4dc..6a86841cd7 100644
--- a/package/src/i18n/ja.json
+++ b/package/src/i18n/ja.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "デバイス設定でカメラへのアクセスを許可する",
   "Also send to channel": "チャンネルにも送信",
   "Anonymous": "匿名",
-  "Anonymous poll": "匿名アンケート",
+  "Anonymous voting": "匿名アンケート",
   "Are you sure you want to permanently delete this message?": "このメッセージを完全に削除してもよろしいですか？",
   "Are you sure?": "本当によろしいですか？",
   "Ask a question": "質問をする",
diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json
index 9ee456a513..5e14c9a8a1 100644
--- a/package/src/i18n/ko.json
+++ b/package/src/i18n/ko.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "기기 설정에서 카메라 액세스를 허용하세요.",
   "Also send to channel": "채널에도 전송",
   "Anonymous": "익명",
-  "Anonymous poll": "익명 투표",
+  "Anonymous voting": "익명 투표",
   "Are you sure you want to permanently delete this message?": "이 메시지를 영구적으로 삭제하시겠습니까?",
   "Are you sure?": "확실합니까?",
   "Ask a question": "질문하기",
diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json
index c10cf9516d..a076c7dfdb 100644
--- a/package/src/i18n/nl.json
+++ b/package/src/i18n/nl.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Sta cameratoegang toe in de apparaatinstellingen",
   "Also send to channel": "Stuur ook naar kanaal",
   "Anonymous": "Anoniem",
-  "Anonymous poll": "Anonieme peiling",
+  "Anonymous voting": "Anonieme peiling",
   "Are you sure you want to permanently delete this message?": "Weet u zeker dat u dit bericht definitief wilt verwijderen?",
   "Are you sure?": "Weet je het zeker?",
   "Ask a question": "Stel een vraag",
diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json
index 4975c31232..730c879c13 100644
--- a/package/src/i18n/pt-br.json
+++ b/package/src/i18n/pt-br.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Permitir acesso à câmera nas configurações do dispositivo",
   "Also send to channel": "Também enviar para o canal",
   "Anonymous": "Anônimo",
-  "Anonymous poll": "Enquete anônima",
+  "Anonymous voting": "Enquete anônima",
   "Are you sure you want to permanently delete this message?": "Tem certeza de que deseja excluir esta mensagem permanentemente?",
   "Are you sure?": "Tem certeza?",
   "Ask a question": "Fazer uma pergunta",
diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json
index 6ec8f50384..e2538db461 100644
--- a/package/src/i18n/ru.json
+++ b/package/src/i18n/ru.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Разрешите доступ к камере в настройках устройства.",
   "Also send to channel": "Также отправить на канал",
   "Anonymous": "Анонимный",
-  "Anonymous poll": "Анонимный опрос",
+  "Anonymous voting": "Анонимный опрос",
   "Are you sure you want to permanently delete this message?": "Вы действительно хотите удалить это сообщение без возможности восстановления?",
   "Are you sure?": "Вы уверены?",
   "Ask a question": "Задайте вопрос",
diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json
index a0270b2681..0bf73a7605 100644
--- a/package/src/i18n/tr.json
+++ b/package/src/i18n/tr.json
@@ -10,7 +10,7 @@
   "Allow camera access in device settings": "Cihaz ayarlarında kamera erişimine izin ver",
   "Also send to channel": "Kanala da gönder",
   "Anonymous": "Anonim",
-  "Anonymous poll": "Anonim anket",
+  "Anonymous voting": "Anonim anket",
   "Are you sure you want to permanently delete this message?": "Bu mesajı kalıcı olarak silmek istediğinizden emin misiniz?",
   "Are you sure?": "Emin misiniz?",
   "Ask a question": "Bir soru sor",

From 712985065aa46ed7453cd39b61144ef7401262c8 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:22:09 +0100
Subject: [PATCH 11/16] fix: more translations and switches

---
 package/src/components/Poll/CreatePollContent.tsx            | 5 +++--
 package/src/components/Poll/Poll.tsx                         | 2 +-
 .../src/components/Poll/components/MultipleAnswersField.tsx  | 2 +-
 package/src/i18n/en.json                                     | 4 ++--
 package/src/i18n/es.json                                     | 4 ++--
 package/src/i18n/fr.json                                     | 4 ++--
 package/src/i18n/he.json                                     | 4 ++--
 package/src/i18n/hi.json                                     | 4 ++--
 package/src/i18n/it.json                                     | 4 ++--
 package/src/i18n/ja.json                                     | 4 ++--
 package/src/i18n/ko.json                                     | 4 ++--
 package/src/i18n/nl.json                                     | 4 ++--
 package/src/i18n/pt-br.json                                  | 4 ++--
 package/src/i18n/ru.json                                     | 4 ++--
 package/src/i18n/tr.json                                     | 4 ++--
 15 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
index dd186b94f2..aff26d3d9f 100644
--- a/package/src/components/Poll/CreatePollContent.tsx
+++ b/package/src/components/Poll/CreatePollContent.tsx
@@ -273,14 +273,15 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'space-between',
         flexDirection: 'row',
-        backgroundColor: semantics.inputOptionCardBg,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
         padding: primitives.spacingMd,
         borderRadius: primitives.radiusLg,
       },
       optionCardWrapper: {
         gap: primitives.spacingMd,
+        // padding: primitives.spacingMd,
       },
-      optionCardSwitch: {},
+      optionCardSwitch: { width: 64 },
     });
   }, [semantics]);
 };
diff --git a/package/src/components/Poll/Poll.tsx b/package/src/components/Poll/Poll.tsx
index 6493d069c5..b0e63bbd20 100644
--- a/package/src/components/Poll/Poll.tsx
+++ b/package/src/components/Poll/Poll.tsx
@@ -32,7 +32,7 @@ export const PollHeader = () => {
 
   const subtitle = useMemo(() => {
     if (isClosed) {
-      return t('Vote ended');
+      return t('Poll has ended');
     }
     if (enforceUniqueVote) {
       return t('Select one');
diff --git a/package/src/components/Poll/components/MultipleAnswersField.tsx b/package/src/components/Poll/components/MultipleAnswersField.tsx
index 5c3809f57c..2d28921637 100644
--- a/package/src/components/Poll/components/MultipleAnswersField.tsx
+++ b/package/src/components/Poll/components/MultipleAnswersField.tsx
@@ -122,7 +122,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: {},
+      optionCardSwitch: { width: 64 },
     });
   }, [semantics]);
 };
diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json
index e0f34c4d7a..e9640e72fa 100644
--- a/package/src/i18n/en.json
+++ b/package/src/i18n/en.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "View {{count}} comment",
   "View {{count}} comments_other": "View {{count}} comments",
   "Voice message": "Voice message",
-  "Vote ended": "Vote ended",
   "You": "You",
   "You can't send messages in this channel": "You can't send messages in this channel",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} Reaction",
   "{{count}} Reactions_other": "{{count}} Reactions",
   "Tap to remove": "Tap to remove",
-  "Draft": "Draft"
+  "Draft": "Draft",
+  "Poll has ended": "Poll has ended"
 }
diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json
index aa793f81cf..acf1fac499 100644
--- a/package/src/i18n/es.json
+++ b/package/src/i18n/es.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Ver {{count}} comentario",
   "View {{count}} comments_other": "Ver {{count}} comentarios",
   "Voice message": "Mensaje de voz",
-  "Vote ended": "Votación finalizada",
   "You": "Tú",
   "You can't send messages in this channel": "No puedes enviar mensajes en este canal",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} reacción",
   "{{count}} Reactions_other": "{{count}} reacciones",
   "Tap to remove": "Toca para quitar",
-  "Draft": "Borrador"
+  "Draft": "Borrador",
+  "Poll has ended": "Votación finalizada"
 }
diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json
index 3e0879588d..57f3ac6fa6 100644
--- a/package/src/i18n/fr.json
+++ b/package/src/i18n/fr.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Voir {{count}} commentaire",
   "View {{count}} comments_other": "Voir {{count}} commentaires",
   "Voice message": "Message vocal",
-  "Vote ended": "Vote terminé",
   "You": "Toi",
   "You can't send messages in this channel": "You can't send messages in this channel",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} réaction",
   "{{count}} Reactions_other": "{{count}} réactions",
   "Tap to remove": "Appuyez pour retirer",
-  "Draft": "Brouillon"
+  "Draft": "Brouillon",
+  "Poll has ended": "Vote terminé"
 }
diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json
index f05d16ee0c..af03c4a446 100644
--- a/package/src/i18n/he.json
+++ b/package/src/i18n/he.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "הצג {{count}} תגובה",
   "View {{count}} comments_other": "הצג {{count}} תגובות",
   "Voice message": "הודעת קול",
-  "Vote ended": "ההצבעה הסתיימה",
   "You": "את/ה",
   "You can't send messages in this channel": "את/ב לא יכול/ה לשלוח הודעות בשיחה זו",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} תגובה",
   "{{count}} Reactions_other": "{{count}} תגובות",
   "Tap to remove": "הקש כדי להסיר",
-  "Draft": "טיוטה"
+  "Draft": "טיוטה",
+  "Poll has ended": "ההצבעה הסתיימה"
 }
diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json
index ca04faffb6..380baad4a7 100644
--- a/package/src/i18n/hi.json
+++ b/package/src/i18n/hi.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "{{count}} टिप्पणी देखें",
   "View {{count}} comments_other": "{{count}} टिप्पणियाँ देखें",
   "Voice message": "वॉइस संदेश",
-  "Vote ended": "वोट समाप्त",
   "You": "आप",
   "You can't send messages in this channel": "आप इस चैनल में संदेश नहीं भेज सकते",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} प्रतिक्रिया",
   "{{count}} Reactions_other": "{{count}} प्रतिक्रियाएँ",
   "Tap to remove": "हटाने के लिए टैप करें",
-  "Draft": "ड्राफ्ट"
+  "Draft": "ड्राफ्ट",
+  "Poll has ended": "वोट समाप्त"
 }
diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json
index 51e8e13042..52358aa6f3 100644
--- a/package/src/i18n/it.json
+++ b/package/src/i18n/it.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Vedi {{count}} commento",
   "View {{count}} comments_other": "Vedi {{count}} commenti",
   "Voice message": "Messaggio vocale",
-  "Vote ended": "Votazione terminata",
   "You": "Tu",
   "You can't send messages in this channel": "Non puoi inviare messaggi in questo canale",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} reazione",
   "{{count}} Reactions_other": "{{count}} reazioni",
   "Tap to remove": "Tocca per rimuovere",
-  "Draft": "Borrador"
+  "Draft": "Borrador",
+  "Poll has ended": "Votazione terminata"
 }
diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json
index 6a86841cd7..3151695cdc 100644
--- a/package/src/i18n/ja.json
+++ b/package/src/i18n/ja.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "{{count}} 件のコメントを表示",
   "View {{count}} comments_other": "{{count}} 件のコメントを表示",
   "Voice message": "ボイスメッセージ",
-  "Vote ended": "投票終了",
   "You": "あなた",
   "You can't send messages in this channel": "このチャンネルではメッセージを送信できません",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}}件のリアクション",
   "{{count}} Reactions_other": "{{count}}件のリアクション",
   "Tap to remove": "タップして削除",
-  "Draft": "下書き"
+  "Draft": "下書き",
+  "Poll has ended": "投票終了"
 }
diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json
index 5e14c9a8a1..c867997a70 100644
--- a/package/src/i18n/ko.json
+++ b/package/src/i18n/ko.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "{{count}}개의 댓글 보기",
   "View {{count}} comments_other": "{{count}}개의 댓글 보기",
   "Voice message": "음성 메시지",
-  "Vote ended": "투표 종료됨",
   "You": "당신",
   "You can't send messages in this channel": "이 채널에서는 메세지를 전송할 수 없습니다",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}}개의 반응",
   "{{count}} Reactions_other": "{{count}}개의 반응",
   "Tap to remove": "탭하여 제거",
-  "Draft": "초안"
+  "Draft": "초안",
+  "Poll has ended": "투표 종료됨"
 }
diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json
index a076c7dfdb..110f25055f 100644
--- a/package/src/i18n/nl.json
+++ b/package/src/i18n/nl.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Bekijk {{count}} reactie",
   "View {{count}} comments_other": "Bekijk {{count}} reacties",
   "Voice message": "Spraakbericht",
-  "Vote ended": "Stemmen beëindigd",
   "You": "U",
   "You can't send messages in this channel": "Je kan geen berichten sturen in dit kanaal",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} reactie",
   "{{count}} Reactions_other": "{{count}} reacties",
   "Tap to remove": "Tik om te verwijderen",
-  "Draft": "Ontwerp"
+  "Draft": "Ontwerp",
+  "Poll has ended": "Stemmen beëindigd"
 }
diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json
index 730c879c13..d197d1d594 100644
--- a/package/src/i18n/pt-br.json
+++ b/package/src/i18n/pt-br.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Ver {{count}} comentário",
   "View {{count}} comments_other": "Ver {{count}} comentários",
   "Voice message": "Mensagem de voz",
-  "Vote ended": "Votação encerrada",
   "You": "Você",
   "You can't send messages in this channel": "Você não pode enviar mensagens neste canal",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} reação",
   "{{count}} Reactions_other": "{{count}} reações",
   "Tap to remove": "Toque para remover",
-  "Draft": "Rascunho"
+  "Draft": "Rascunho",
+  "Poll has ended": "Votação encerrada"
 }
diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json
index e2538db461..ba38b33512 100644
--- a/package/src/i18n/ru.json
+++ b/package/src/i18n/ru.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "Посмотреть {{count}} комментарий",
   "View {{count}} comments_other": "Посмотреть {{count}} комментария",
   "Voice message": "Голосовое сообщение",
-  "Vote ended": "Голосование завершено",
   "You": "Вы",
   "You can't send messages in this channel": "Вы не можете отправлять сообщения в этот канал",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} реакция",
   "{{count}} Reactions_other": "{{count}} реакций",
   "Tap to remove": "Нажмите, чтобы удалить",
-  "Draft": "Черновик"
+  "Draft": "Черновик",
+  "Poll has ended": "Голосование завершено"
 }
diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json
index 0bf73a7605..7acbab569f 100644
--- a/package/src/i18n/tr.json
+++ b/package/src/i18n/tr.json
@@ -128,7 +128,6 @@
   "View {{count}} comments_one": "{{count}} yorumu görüntüle",
   "View {{count}} comments_other": "{{count}} yorumu görüntüle",
   "Voice message": "Sesli mesaj",
-  "Vote ended": "Oylama sona erdi",
   "You": "Sen",
   "You can't send messages in this channel": "Bu konuşmaya mesaj gönderemezsiniz",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -173,5 +172,6 @@
   "{{count}} Reactions_one": "{{count}} tepki",
   "{{count}} Reactions_other": "{{count}} tepki",
   "Tap to remove": "Kaldırmak için dokunun",
-  "Draft": "Taslak"
+  "Draft": "Taslak",
+  "Poll has ended": "Oylama sona erdi"
 }

From 27afe3db8d45050d729ce6b171887c38f622a6a0 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:24:48 +0100
Subject: [PATCH 12/16] fix: remove redundant style

---
 package/src/components/Poll/CreatePollContent.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
index aff26d3d9f..75eb97e370 100644
--- a/package/src/components/Poll/CreatePollContent.tsx
+++ b/package/src/components/Poll/CreatePollContent.tsx
@@ -279,7 +279,6 @@ const useStyles = () => {
       },
       optionCardWrapper: {
         gap: primitives.spacingMd,
-        // padding: primitives.spacingMd,
       },
       optionCardSwitch: { width: 64 },
     });

From 23672c2dbf87c1b3d5a64fc509bb6ffe15d5d5b0 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:45:17 +0100
Subject: [PATCH 13/16] fix: suggestions background

---
 .../AutoCompleteInput/AutoCompleteSuggestionItem.tsx | 12 +++++++++---
 .../AutoCompleteInput/AutoCompleteSuggestionList.tsx |  5 +++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
index 24511820ae..7abe829c14 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx
@@ -73,7 +73,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   const { args, name } = item;
   const {
     theme: {
-      colors: { black, grey },
+      semantics,
       messageInput: {
         suggestions: {
           command: { args: argsStyle, container: commandContainer, title },
@@ -86,10 +86,16 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   return (
     <View style={[styles.commandContainer, commandContainer]}>
       {name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
-      <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+      <Text
+        style={[styles.title, { color: semantics.textPrimary }, title]}
+        testID='commands-item-title'
+      >
         {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
       </Text>
-      <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+      <Text
+        style={[styles.args, { color: semantics.textTertiary }, argsStyle]}
+        testID='commands-item-args'
+      >
         {`/${name} ${args}`}
       </Text>
     </View>
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
index feee1fe678..56b0226ca0 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
@@ -62,7 +62,6 @@ export const AutoCompleteSuggestionList = ({
 
   const {
     theme: {
-      colors: { black, white },
       messageInput: {
         container: { maxHeight },
       },
@@ -106,7 +105,7 @@ export const AutoCompleteSuggestionList = ({
         onEndReached={loadMore}
         onEndReachedThreshold={0.1}
         renderItem={renderItem}
-        style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
+        style={[styles.flatlist, { maxHeight }]}
         testID={'auto-complete-suggestion-list'}
       />
     </Animated.View>
@@ -132,6 +131,8 @@ const useStyles = () => {
           borderColor: semantics.borderCoreDefault,
         },
         flatlist: {
+          backgroundColor: semantics.composerBg,
+          shadowColor: semantics.accentBlack,
           borderRadius: 8,
           elevation: 3,
           marginHorizontal: 8,

From 6e71c69fc5ab053aedcb677aee212e13b6d8ab41 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:47:02 +0100
Subject: [PATCH 14/16] fix: composer suggestions bg as well

---
 .../AttachmentPicker/components/AttachmentPickerContent.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
index 639751e1e6..1eedaf2351 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
@@ -175,8 +175,10 @@ const useCommandPickerStyle = () => {
           flexGrow: 1,
           paddingHorizontal: primitives.spacingXxs,
           paddingBottom: primitives.spacing2xl,
+          backgroundColor: semantics.composerBg,
         },
         title: {
+          backgroundColor: semantics.composerBg,
           fontWeight: primitives.typographyFontWeightSemiBold,
           fontSize: primitives.typographyFontSizeMd,
           color: semantics.textPrimary,
@@ -184,7 +186,7 @@ const useCommandPickerStyle = () => {
           paddingBottom: primitives.spacingMd,
         },
       }),
-    [semantics.textPrimary],
+    [semantics.composerBg, semantics.textPrimary],
   );
 };
 

From b8b82aaace313bb3d8ac504c3a44bb833d5a0941 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 16:51:16 +0100
Subject: [PATCH 15/16] chore: animate giphy chip

---
 package/src/components/MessageInput/MessageInput.tsx | 10 ++++++----
 .../MessageInput/MessageInputLeadingView.tsx         | 12 +++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
index 0e6035cb47..eb93768733 100644
--- a/package/src/components/MessageInput/MessageInput.tsx
+++ b/package/src/components/MessageInput/MessageInput.tsx
@@ -418,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                     <>
                       <MessageInputLeadingView />
 
-                      <AutoCompleteInput
-                        TextInputComponent={TextInputComponent}
-                        {...additionalTextInputProps}
-                      />
+                      <Animated.View layout={LinearTransition.duration(200)}>
+                        <AutoCompleteInput
+                          TextInputComponent={TextInputComponent}
+                          {...additionalTextInputProps}
+                        />
+                      </Animated.View>
                     </>
                   )}
 
diff --git a/package/src/components/MessageInput/MessageInputLeadingView.tsx b/package/src/components/MessageInput/MessageInputLeadingView.tsx
index a4e837a3d9..f28230c516 100644
--- a/package/src/components/MessageInput/MessageInputLeadingView.tsx
+++ b/package/src/components/MessageInput/MessageInputLeadingView.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { AttachmentManagerState } from 'stream-chat';
 
@@ -31,9 +33,13 @@ export const MessageInputLeadingView = () => {
   }, [textComposer, hasAttachments]);
 
   return command && !hasAttachments ? (
-    <View style={styles.giphyContainer}>
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      style={styles.giphyContainer}
+    >
       <GiphyChip />
-    </View>
+    </Animated.View>
   ) : null;
 };
 

From 62f29d60132e3041ec12a554e320da9ccc311eb3 Mon Sep 17 00:00:00 2001
From: Ivan Sekovanikj <ivan.sekovanikj@getstream.io>
Date: Thu, 26 Feb 2026 17:03:01 +0100
Subject: [PATCH 16/16] fix: lint issues and failing tests

---
 .../__snapshots__/MessageAvatar.test.js.snap  |   2 +-
 .../MessageTextContainer.test.tsx.snap        |   4 +-
 .../PollResults/PollOptionFullResults.tsx     |   2 +-
 .../__snapshots__/Thread.test.js.snap         | 104 +++++++++---------
 .../src/utils/__tests__/Streami18n.test.js    |  18 ++-
 .../src/utils/i18n/predefinedFormatters.ts    |   3 +
 6 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
index 3356718c66..9599074cc2 100644
--- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
+++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
@@ -22,7 +22,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
             "width": 32,
           },
           {
-            "backgroundColor": "#003a3f",
+            "backgroundColor": "#006970",
           },
           {
             "borderColor": "rgba(255, 255, 255, 0.2)",
diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
index 3f3a5a8efc..95f08ee3e1 100644
--- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
+++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
           "alignItems": "flex-start",
           "flexDirection": "row",
           "flexWrap": "wrap",
-          "fontSize": 15,
+          "fontSize": 17,
           "justifyContent": "flex-start",
           "lineHeight": 20,
           "marginBottom": 8,
@@ -41,7 +41,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
         style={
           {
             "color": "#000000",
-            "fontSize": 15,
+            "fontSize": 17,
             "lineHeight": 20,
           }
         }
diff --git a/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx b/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
index 77a64f6e15..372af40a76 100644
--- a/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
+++ b/package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx
@@ -136,6 +136,6 @@ const useStyles = () => {
           marginLeft: primitives.spacingMd,
         },
       }),
-    [],
+    [semantics.backgroundCoreSurfaceCard, semantics.textPrimary],
   );
 };
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index f7a2683ad1..ff582aaea3 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -413,7 +413,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     {
-                                      "backgroundColor": "#fcedb9",
+                                      "backgroundColor": "#fcd579",
                                     },
                                     {
                                       "borderColor": "rgba(0, 0, 0, 0.1)",
@@ -619,7 +619,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                     "alignItems": "flex-start",
                                                     "flexDirection": "row",
                                                     "flexWrap": "wrap",
-                                                    "fontSize": 15,
+                                                    "fontSize": 17,
                                                     "justifyContent": "flex-start",
                                                     "lineHeight": 20,
                                                     "marginBottom": 8,
@@ -631,7 +631,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                   style={
                                                     {
                                                       "color": "#000000",
-                                                      "fontSize": 15,
+                                                      "fontSize": 17,
                                                       "lineHeight": 20,
                                                     }
                                                   }
@@ -675,7 +675,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   [
                                     {
                                       "color": "#687385",
-                                      "fontSize": 12,
+                                      "fontSize": 13,
                                       "fontWeight": 400,
                                       "lineHeight": 16,
                                     },
@@ -780,7 +780,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     {
-                                      "backgroundColor": "#bdfcdb",
+                                      "backgroundColor": "#8febbd",
                                     },
                                     {
                                       "borderColor": "rgba(0, 0, 0, 0.1)",
@@ -986,7 +986,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                     "alignItems": "flex-start",
                                                     "flexDirection": "row",
                                                     "flexWrap": "wrap",
-                                                    "fontSize": 15,
+                                                    "fontSize": 17,
                                                     "justifyContent": "flex-start",
                                                     "lineHeight": 20,
                                                     "marginBottom": 8,
@@ -998,7 +998,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                   style={
                                                     {
                                                       "color": "#000000",
-                                                      "fontSize": 15,
+                                                      "fontSize": 17,
                                                       "lineHeight": 20,
                                                     }
                                                   }
@@ -1042,7 +1042,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   [
                                     {
                                       "color": "#687385",
-                                      "fontSize": 12,
+                                      "fontSize": 13,
                                       "fontWeight": 400,
                                       "lineHeight": 16,
                                     },
@@ -1113,7 +1113,7 @@ exports[`Thread should match thread snapshot 1`] = `
                       style={
                         {
                           "color": "#414552",
-                          "fontSize": 12,
+                          "fontSize": 13,
                           "fontWeight": 600,
                           "lineHeight": 16,
                         }
@@ -1183,7 +1183,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     {
-                                      "backgroundColor": "#fcedb9",
+                                      "backgroundColor": "#fcd579",
                                     },
                                     {
                                       "borderColor": "rgba(0, 0, 0, 0.1)",
@@ -1389,7 +1389,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                     "alignItems": "flex-start",
                                                     "flexDirection": "row",
                                                     "flexWrap": "wrap",
-                                                    "fontSize": 15,
+                                                    "fontSize": 17,
                                                     "justifyContent": "flex-start",
                                                     "lineHeight": 20,
                                                     "marginBottom": 8,
@@ -1401,7 +1401,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                   style={
                                                     {
                                                       "color": "#000000",
-                                                      "fontSize": 15,
+                                                      "fontSize": 17,
                                                       "lineHeight": 20,
                                                     }
                                                   }
@@ -1445,7 +1445,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   [
                                     {
                                       "color": "#687385",
-                                      "fontSize": 12,
+                                      "fontSize": 13,
                                       "fontWeight": 400,
                                       "lineHeight": 16,
                                     },
@@ -1552,7 +1552,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     {
-                                      "backgroundColor": "#bdfcdb",
+                                      "backgroundColor": "#8febbd",
                                     },
                                     {
                                       "borderColor": "rgba(0, 0, 0, 0.1)",
@@ -1758,7 +1758,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                     "alignItems": "flex-start",
                                                     "flexDirection": "row",
                                                     "flexWrap": "wrap",
-                                                    "fontSize": 15,
+                                                    "fontSize": 17,
                                                     "justifyContent": "flex-start",
                                                     "lineHeight": 20,
                                                     "marginBottom": 8,
@@ -1770,7 +1770,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                   style={
                                                     {
                                                       "color": "#000000",
-                                                      "fontSize": 15,
+                                                      "fontSize": 17,
                                                       "lineHeight": 20,
                                                     }
                                                   }
@@ -1814,7 +1814,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   [
                                     {
                                       "color": "#687385",
-                                      "fontSize": 12,
+                                      "fontSize": 13,
                                       "fontWeight": 400,
                                       "lineHeight": 16,
                                     },
@@ -2207,39 +2207,43 @@ exports[`Thread should match thread snapshot 1`] = `
                 ]
               }
             >
-              <TextInput
-                autoFocus={true}
-                editable={true}
-                maxLength={5000}
-                multiline={true}
-                onChangeText={[Function]}
-                onSelectionChange={[Function]}
-                placeholder="Send a message"
-                placeholderTextColor="#687385"
-                style={
-                  [
-                    {
-                      "color": "#1a1b25",
-                      "flex": 1,
-                      "fontSize": 16,
-                      "includeFontPadding": false,
-                      "lineHeight": 20,
-                      "paddingLeft": 16,
-                      "paddingVertical": 12,
-                      "textAlignVertical": "center",
-                    },
-                    {
-                      "maxHeight": 124,
-                      "paddingLeft": 16,
-                      "paddingRight": 8,
-                      "textAlign": "left",
-                    },
-                    {},
-                  ]
-                }
-                testID="auto-complete-text-input"
-                value=""
-              />
+              <View
+                layout={BaseAnimationMock {}}
+              >
+                <TextInput
+                  autoFocus={true}
+                  editable={true}
+                  maxLength={5000}
+                  multiline={true}
+                  onChangeText={[Function]}
+                  onSelectionChange={[Function]}
+                  placeholder="Send a message"
+                  placeholderTextColor="#687385"
+                  style={
+                    [
+                      {
+                        "color": "#1a1b25",
+                        "flex": 1,
+                        "fontSize": 16,
+                        "includeFontPadding": false,
+                        "lineHeight": 20,
+                        "paddingLeft": 16,
+                        "paddingVertical": 12,
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "maxHeight": 124,
+                        "paddingLeft": 16,
+                        "paddingRight": 8,
+                        "textAlign": "left",
+                      },
+                      {},
+                    ]
+                  }
+                  testID="auto-complete-text-input"
+                  value=""
+                />
+              </View>
               <View
                 style={
                   [
diff --git a/package/src/utils/__tests__/Streami18n.test.js b/package/src/utils/__tests__/Streami18n.test.js
index 4ea41a955c..a3152bf09a 100644
--- a/package/src/utils/__tests__/Streami18n.test.js
+++ b/package/src/utils/__tests__/Streami18n.test.js
@@ -50,7 +50,11 @@ describe('Streami18n instance - with built-in language', () => {
     it('should provide dutch translator', async () => {
       const { t: _t } = await streami18n.getTranslators();
       for (const key in nlTranslations) {
-        if ((key.indexOf('{{') > -1 && key.indexOf('}}') > -1) || key.indexOf('duration/') > -1) {
+        const value = nlTranslations[key];
+        const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1;
+        const hasTemplateInValue =
+          typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1;
+        if (hasTemplateInKey || hasTemplateInValue || key.indexOf('duration/') > -1) {
           continue;
         }
 
@@ -74,7 +78,11 @@ describe('Streami18n instance - with built-in language', () => {
     it('should provide dutch translator', async () => {
       const { t: _t } = await streami18n.getTranslators();
       for (const key in nlTranslations) {
-        if ((key.indexOf('{{') > -1 && key.indexOf('}}') > -1) || key.indexOf('duration/') > -1) {
+        const value = nlTranslations[key];
+        const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1;
+        const hasTemplateInValue =
+          typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1;
+        if (hasTemplateInKey || hasTemplateInValue || key.indexOf('duration/') > -1) {
           continue;
         }
 
@@ -189,7 +197,11 @@ describe('setLanguage - switch to french', () => {
     const { t: _t } = await streami18n.getTranslators();
     for (const key in frTranslations) {
       // Skip keys with template strings or duration keys
-      if ((key.indexOf('{{') > -1 && key.indexOf('}}') > -1) || key.indexOf('duration/') > -1) {
+      const value = frTranslations[key];
+      const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1;
+      const hasTemplateInValue =
+        typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1;
+      if (hasTemplateInKey || hasTemplateInValue || key.indexOf('duration/') > -1) {
         continue;
       }
 
diff --git a/package/src/utils/i18n/predefinedFormatters.ts b/package/src/utils/i18n/predefinedFormatters.ts
index dea1054fe6..5883e55571 100644
--- a/package/src/utils/i18n/predefinedFormatters.ts
+++ b/package/src/utils/i18n/predefinedFormatters.ts
@@ -53,6 +53,9 @@ export const predefinedFormatters: PredefinedFormatters = {
       return result;
     },
   relativeCompactDateFormatter: (streamI18n) => (value) => {
+    if (value === undefined || value === null) {
+      return JSON.stringify(value);
+    }
     const parsedTime = streamI18n.tDateTimeParser(value);
     const parsedNow = streamI18n.tDateTimeParser();