diff --git a/examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx b/examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx
index 6201074e3e..eb17c80820 100644
--- a/examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx
+++ b/examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx
@@ -54,7 +54,7 @@ const useStyles = () => {
   const { theme: { semantics }} = useTheme();
   return useMemo(() => StyleSheet.create({
     selectionBar: {
-      backgroundColor: semantics.composerBg,
+      backgroundColor: semantics.backgroundCoreElevation1,
       flexDirection: 'row',
       alignItems: 'center',
       paddingHorizontal: 16,
diff --git a/package/expo-package/src/optionalDependencies/__tests__/getPhotos.test.ts b/package/expo-package/src/optionalDependencies/__tests__/getPhotos.test.ts
deleted file mode 100644
index 24afe40d6c..0000000000
--- a/package/expo-package/src/optionalDependencies/__tests__/getPhotos.test.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-jest.mock(
-  'expo-media-library',
-  () => ({
-    MediaType: {
-      photo: 'photo',
-      video: 'video',
-    },
-    SortBy: {
-      modificationTime: 'modificationTime',
-    },
-    getAssetsAsync: jest.fn(),
-    getPermissionsAsync: jest.fn(),
-    requestPermissionsAsync: jest.fn(),
-  }),
-  { virtual: true },
-);
-
-jest.mock('../getLocalAssetUri', () => ({
-  getLocalAssetUri: jest.fn(),
-}));
-
-import * as MediaLibrary from 'expo-media-library';
-
-import { getLocalAssetUri } from '../getLocalAssetUri';
-import { getPhotos } from '../getPhotos';
-
-const mockedMediaLibrary = MediaLibrary as {
-  getAssetsAsync: jest.Mock;
-  getPermissionsAsync: jest.Mock;
-  requestPermissionsAsync: jest.Mock;
-};
-
-const mockedGetLocalAssetUri = getLocalAssetUri as jest.Mock;
-
-describe('getPhotos', () => {
-  beforeEach(() => {
-    mockedMediaLibrary.getPermissionsAsync.mockResolvedValue({
-      accessPrivileges: 'all',
-      status: 'granted',
-    });
-    mockedMediaLibrary.requestPermissionsAsync.mockResolvedValue({
-      status: 'granted',
-    });
-    mockedMediaLibrary.getAssetsAsync.mockReset();
-    mockedGetLocalAssetUri.mockReset();
-    mockedGetLocalAssetUri.mockResolvedValue(undefined);
-  });
-
-  it('falls back to media-type mime strings when filename mime detection returns null', async () => {
-    mockedMediaLibrary.getAssetsAsync.mockResolvedValue({
-      assets: [
-        {
-          duration: 0,
-          filename: 'IMG_0001',
-          height: 100,
-          id: 'photo-1',
-          mediaType: MediaLibrary.MediaType.photo,
-          uri: 'ph://photo-1',
-          width: 200,
-        },
-        {
-          duration: 12,
-          filename: 'VID_0002',
-          height: 300,
-          id: 'video-1',
-          mediaType: MediaLibrary.MediaType.video,
-          uri: 'ph://video-1',
-          width: 400,
-        },
-      ],
-      endCursor: undefined,
-      hasNextPage: false,
-    });
-
-    const result = await getPhotos({ after: undefined, first: 20 });
-
-    expect(result.assets).toEqual([
-      expect.objectContaining({
-        type: 'image/*',
-      }),
-      expect.objectContaining({
-        type: 'video/*',
-      }),
-    ]);
-  });
-});
diff --git a/package/src/components/Attachment/Audio/PlayPauseButton.tsx b/package/src/components/Attachment/Audio/PlayPauseButton.tsx
index c0dd4bc35a..71d9f0d0f4 100644
--- a/package/src/components/Attachment/Audio/PlayPauseButton.tsx
+++ b/package/src/components/Attachment/Audio/PlayPauseButton.tsx
@@ -38,7 +38,7 @@ export const PlayPauseButton = ({
       style={({ pressed }) => [
         styles.container,
         {
-          backgroundColor: pressed ? semantics.backgroundCorePressed : 'transparent',
+          backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent',
         },
         containerStyle,
       ]}
diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
index 887a4d8080..95d7491f07 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, StyleSheet } from 'react-native';
 
 import { renderAttachmentPickerItem } from './AttachmentPickerItem';
@@ -31,12 +31,16 @@ const useMediaPickerStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return StyleSheet.create({
-    container: {
-      flexGrow: 1,
-      backgroundColor: semantics.composerBg,
-    },
-  });
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flexGrow: 1,
+          backgroundColor: semantics.backgroundCoreElevation1,
+        },
+      }),
+    [semantics.backgroundCoreElevation1],
+  );
 };
 
 export const AttachmentMediaPickerIcon = () => {
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
index 1eedaf2351..6a26aeffe8 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx
@@ -32,7 +32,7 @@ const useStyles = () => {
         container: {
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           paddingHorizontal: primitives.spacing2xl,
           paddingBottom: primitives.spacing3xl,
         },
@@ -46,7 +46,7 @@ const useStyles = () => {
           maxWidth: 200,
         },
       }),
-    [semantics.backgroundElevationElevation1, semantics.textSecondary],
+    [semantics.backgroundCoreElevation1, semantics.textSecondary],
   );
 };
 
@@ -117,7 +117,7 @@ const AttachmentCommandPickerItemUI = ({
   return (
     <Pressable
       style={({ pressed }) => ({
-        backgroundColor: pressed ? semantics.backgroundCorePressed : undefined,
+        backgroundColor: pressed ? semantics.backgroundUtilityPressed : undefined,
         borderRadius: primitives.radiusSm,
       })}
       onPress={onPress}
@@ -175,10 +175,10 @@ const useCommandPickerStyle = () => {
           flexGrow: 1,
           paddingHorizontal: primitives.spacingXxs,
           paddingBottom: primitives.spacing2xl,
-          backgroundColor: semantics.composerBg,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         title: {
-          backgroundColor: semantics.composerBg,
+          backgroundColor: semantics.backgroundCoreElevation1,
           fontWeight: primitives.typographyFontWeightSemiBold,
           fontSize: primitives.typographyFontSizeMd,
           color: semantics.textPrimary,
@@ -186,7 +186,7 @@ const useCommandPickerStyle = () => {
           paddingBottom: primitives.spacingMd,
         },
       }),
-    [semantics.composerBg, semantics.textPrimary],
+    [semantics.backgroundCoreElevation1, semantics.textPrimary],
   );
 };
 
diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
index c43274a096..5586088be4 100644
--- a/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
+++ b/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
@@ -20,14 +20,14 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          backgroundColor: semantics.composerBg,
+          backgroundColor: semantics.backgroundCoreElevation1,
           paddingBottom: primitives.spacingSm,
           paddingHorizontal: primitives.spacingMd,
           alignItems: 'center',
           flexDirection: 'row',
         },
       }),
-    [semantics.composerBg],
+    [semantics.backgroundCoreElevation1],
   );
 };
 
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
index 56b0226ca0..455d8efd3c 100644
--- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
+++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
@@ -126,13 +126,13 @@ const useStyles = () => {
       StyleSheet.create({
         container: {
           maxHeight: DEFAULT_LIST_HEIGHT,
-          backgroundColor: semantics.composerBg,
+          backgroundColor: semantics.backgroundCoreElevation1,
           borderTopWidth: 1,
           borderColor: semantics.borderCoreDefault,
         },
         flatlist: {
-          backgroundColor: semantics.composerBg,
-          shadowColor: semantics.accentBlack,
+          backgroundColor: semantics.backgroundCoreElevation1,
+          shadowColor: semantics.textOnAccent,
           borderRadius: 8,
           elevation: 3,
           marginHorizontal: 8,
diff --git a/package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx b/package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx
index d93dcad12d..c4e1b6c3af 100644
--- a/package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx
+++ b/package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx
@@ -125,14 +125,14 @@ const useStyles = () => {
       StyleSheet.create({
         contentContainer: {
           flexGrow: 1,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           ...contentContainer,
         },
         headerContainer: {
           flexDirection: 'row',
           padding: primitives.spacingSm,
           gap: primitives.spacingSm,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           ...header.container,
         },
         headerMeta: {
@@ -174,7 +174,7 @@ const useStyles = () => {
       item.destructiveText,
       item.standardText,
       semantics.accentError,
-      semantics.backgroundElevationElevation1,
+      semantics.backgroundCoreElevation1,
       semantics.textPrimary,
       semantics.textTertiary,
     ],
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
index 43ea0c8b02..7379fe2fe7 100644
--- a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
+++ b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
@@ -104,7 +104,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
           {
             backgroundColor:
               pressed && !swipeRegistry?.hasOpen()
-                ? semantics.backgroundCorePressed
+                ? semantics.backgroundUtilityPressed
                 : 'transparent',
           },
           container,
diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
index 9cfe91a31c..ec3f101d1e 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx
@@ -216,7 +216,7 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           borderTopWidth: 1,
           borderTopColor: semantics.borderCoreDefault,
           ...footer.container,
diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
index c7e5563e28..fafef3c6a0 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx
@@ -116,7 +116,7 @@ const useStyles = () => {
     () =>
       StyleSheet.create({
         container: {
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           gap: primitives.spacingXs,
           ...header.container,
         },
diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
index 3ecda66635..0659349ba4 100644
--- a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
+++ b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx
@@ -120,7 +120,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'space-evenly',
diff --git a/package/src/components/Indicators/LoadingDot.tsx b/package/src/components/Indicators/LoadingDot.tsx
index 409d464fde..711d7a4fcc 100644
--- a/package/src/components/Indicators/LoadingDot.tsx
+++ b/package/src/components/Indicators/LoadingDot.tsx
@@ -56,7 +56,7 @@ export const LoadingDot = (props: Props) => {
     <Animated.View
       style={[
         {
-          backgroundColor: semantics.chatBgTypingIndicator,
+          backgroundColor: semantics.chatTextTypingIndicator,
           borderRadius: diameter / 2,
           height: diameter,
           width: diameter,
diff --git a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx b/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx
index 4bb0664c4d..f86962a090 100644
--- a/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx
+++ b/package/src/components/Message/MessageSimple/ReactionList/ReactionListItemWrapper.tsx
@@ -23,9 +23,9 @@ export const ReactionListItemWrapper = (props: ReactionListItemWrapperProps) =>
           styles.container,
           {
             backgroundColor: selected
-              ? semantics.backgroundCoreSelected
+              ? semantics.backgroundUtilitySelected
               : pressed
-                ? semantics.backgroundCorePressed
+                ? semantics.backgroundUtilityPressed
                 : semantics.reactionBg,
           },
           style,
diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx
index ac678ef934..de5f63b0ab 100644
--- a/package/src/components/MessageInput/MessageInput.tsx
+++ b/package/src/components/MessageInput/MessageInput.tsx
@@ -74,11 +74,11 @@ const useStyles = () => {
         alignItems: 'center',
         flex: 1,
         justifyContent: 'center',
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
       },
       pollSafeArea: {
         flex: 1,
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
       },
       container: {
         alignItems: 'center',
@@ -107,7 +107,7 @@ const useStyles = () => {
         borderWidth: 1,
         flex: 1,
         flexDirection: 'row',
-        backgroundColor: semantics.composerBg,
+        backgroundColor: semantics.backgroundCoreElevation1,
         borderColor: semantics.borderCoreDefault,
       },
       inputButtonsContainer: {
@@ -132,7 +132,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
-        backgroundColor: semantics.composerBg,
+        backgroundColor: semantics.backgroundCoreElevation1,
         position: 'absolute',
         width: '100%',
       },
@@ -404,7 +404,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                     styles.wrapper,
                     {
                       borderTopWidth: 1,
-                      backgroundColor: semantics.composerBg,
+                      backgroundColor: semantics.backgroundCoreElevation1,
                       borderColor: semantics.borderCoreDefault,
                       // paddingBottom: BOTTOM_OFFSET,
                       paddingBottom:
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
index 7ea9b848fe..4c19380a2b 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx
@@ -169,7 +169,7 @@ const useImageUploadNotSupportedIndicatorStyles = () => {
   } = useTheme();
   return StyleSheet.create({
     container: {
-      backgroundColor: semantics.backgroundElevationElevation0,
+      backgroundColor: semantics.backgroundCoreElevation0,
       borderRadius: primitives.radiusMax,
       position: 'absolute',
       left: primitives.spacingXxs,
diff --git a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
index 0385522022..5ef92794eb 100644
--- a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
+++ b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx
@@ -89,7 +89,7 @@ const useStyles = () => {
     theme: { semantics },
   } = useTheme();
 
-  const { borderCoreOpacity10 } = semantics;
+  const { borderCoreOpacitySubtle } = semantics;
 
   return useMemo(
     () =>
@@ -101,7 +101,7 @@ const useStyles = () => {
           justifyContent: 'center',
           alignItems: 'center',
           borderRadius: primitives.radiusLg,
-          borderColor: borderCoreOpacity10,
+          borderColor: borderCoreOpacitySubtle,
           borderWidth: 1,
           overflow: 'hidden',
         },
@@ -109,6 +109,6 @@ const useStyles = () => {
           padding: primitives.spacingXxs,
         },
       }),
-    [borderCoreOpacity10],
+    [borderCoreOpacitySubtle],
   );
 };
diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
index 7d65ac3857..265d20a022 100644
--- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
+++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx
@@ -232,7 +232,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ scale: scale.value }],
-      backgroundColor: pressed.value ? semantics.backgroundCorePressed : 'transparent',
+      backgroundColor: pressed.value ? semantics.backgroundUtilityPressed : 'transparent',
     };
   });
 
diff --git a/package/src/components/MessageList/ScrollToBottomButton.tsx b/package/src/components/MessageList/ScrollToBottomButton.tsx
index 52fe02cd22..d60ba57196 100644
--- a/package/src/components/MessageList/ScrollToBottomButton.tsx
+++ b/package/src/components/MessageList/ScrollToBottomButton.tsx
@@ -38,7 +38,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
         style={[
           styles.floatingButtonContainer,
           primitives.lightElevation1,
-          { backgroundColor: semantics.backgroundElevationElevation1 },
+          { backgroundColor: semantics.backgroundCoreElevation1 },
         ]}
       >
         <Button
diff --git a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
index fccd5171a1..9c8b957c7a 100644
--- a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
+++ b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
@@ -78,7 +78,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "backgroundColor": "#fcd579",
                   },
                   {
-                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
                   undefined,
@@ -138,7 +138,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "backgroundColor": "#8febbd",
                   },
                   {
-                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
                   undefined,
@@ -200,7 +200,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
         style={
           [
             {
-              "backgroundColor": "#687385",
+              "backgroundColor": "#1a1b25",
               "borderRadius": 2.5,
               "height": 5,
               "width": 5,
@@ -219,7 +219,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
         style={
           [
             {
-              "backgroundColor": "#687385",
+              "backgroundColor": "#1a1b25",
               "borderRadius": 2.5,
               "height": 5,
               "width": 5,
@@ -238,7 +238,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
         style={
           [
             {
-              "backgroundColor": "#687385",
+              "backgroundColor": "#1a1b25",
               "borderRadius": 2.5,
               "height": 5,
               "width": 5,
diff --git a/package/src/components/MessageMenu/EmojiPickerList.tsx b/package/src/components/MessageMenu/EmojiPickerList.tsx
index 27eb370901..144a68304b 100644
--- a/package/src/components/MessageMenu/EmojiPickerList.tsx
+++ b/package/src/components/MessageMenu/EmojiPickerList.tsx
@@ -109,9 +109,9 @@ const useStyles = () => {
           textAlign: 'center',
         },
         selectedEmoji: {
-          backgroundColor: semantics.backgroundCoreSelected,
+          backgroundColor: semantics.backgroundUtilitySelected,
         },
       }),
-    [semantics.backgroundCoreSelected],
+    [semantics.backgroundUtilitySelected],
   );
 };
diff --git a/package/src/components/MessageMenu/MessageActionList.tsx b/package/src/components/MessageMenu/MessageActionList.tsx
index 6f4e9c4e08..dc6890053a 100644
--- a/package/src/components/MessageMenu/MessageActionList.tsx
+++ b/package/src/components/MessageMenu/MessageActionList.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
@@ -74,27 +74,31 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return StyleSheet.create({
-    container: {
-      borderRadius: primitives.radiusLg,
-      marginTop: 6,
-      backgroundColor: semantics.backgroundElevationElevation2,
-      borderWidth: 1,
-      borderColor: semantics.borderCoreDefault,
-    },
-    contentContainer: {
-      borderRadius: 16,
-      flexGrow: 1,
-      minWidth: 250,
-      padding: primitives.spacingXxs,
-    },
-    separatorContainer: {
-      paddingVertical: primitives.spacingXxs,
-    },
-    separator: {
-      height: 1,
-      width: '100%',
-      backgroundColor: semantics.borderCoreDefault,
-    },
-  });
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: primitives.radiusLg,
+          marginTop: 6,
+          backgroundColor: semantics.backgroundCoreElevation2,
+          borderWidth: 1,
+          borderColor: semantics.borderCoreDefault,
+        },
+        contentContainer: {
+          borderRadius: 16,
+          flexGrow: 1,
+          minWidth: 250,
+          padding: primitives.spacingXxs,
+        },
+        separatorContainer: {
+          paddingVertical: primitives.spacingXxs,
+        },
+        separator: {
+          height: 1,
+          width: '100%',
+          backgroundColor: semantics.borderCoreDefault,
+        },
+      }),
+    [semantics.backgroundCoreElevation2, semantics.borderCoreDefault],
+  );
 };
diff --git a/package/src/components/MessageMenu/MessageActionListItem.tsx b/package/src/components/MessageMenu/MessageActionListItem.tsx
index 6cdd00d474..91e711d132 100644
--- a/package/src/components/MessageMenu/MessageActionListItem.tsx
+++ b/package/src/components/MessageMenu/MessageActionListItem.tsx
@@ -80,7 +80,7 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
       onPress={onActionPress}
       style={({ pressed }) => [
         styles.buttonContainer,
-        { backgroundColor: pressed ? semantics.backgroundCorePressed : 'transparent' },
+        { backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent' },
       ]}
     >
       <View
diff --git a/package/src/components/MessageMenu/MessageReactionPicker.tsx b/package/src/components/MessageMenu/MessageReactionPicker.tsx
index 398aed115e..7c10f83255 100644
--- a/package/src/components/MessageMenu/MessageReactionPicker.tsx
+++ b/package/src/components/MessageMenu/MessageReactionPicker.tsx
@@ -196,7 +196,7 @@ const useStyles = () => {
           marginVertical: 8,
           overflow: 'visible',
           ...(isDark ? primitives.darkElevation3 : primitives.lightElevation3),
-          backgroundColor: semantics.backgroundElevationElevation2,
+          backgroundColor: semantics.backgroundCoreElevation2,
         },
         reactionListContent: {
           flexGrow: 1,
@@ -212,6 +212,6 @@ const useStyles = () => {
           paddingLeft: primitives.spacingXs,
         },
       }),
-    [isDark, semantics.backgroundElevationElevation2],
+    [isDark, semantics.backgroundCoreElevation2],
   );
 };
diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx
index 775cee2d72..188ef76856 100644
--- a/package/src/components/Poll/CreatePollContent.tsx
+++ b/package/src/components/Poll/CreatePollContent.tsx
@@ -258,7 +258,7 @@ const useStyles = () => {
       scrollView: {
         flex: 1,
         padding: primitives.spacingMd,
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
       },
       contentContainerStyle: { paddingBottom: 70 },
       title: {
diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx
index eb9f4300e1..a3da1c2dc4 100644
--- a/package/src/components/Poll/components/CreatePollHeader.tsx
+++ b/package/src/components/Poll/components/CreatePollHeader.tsx
@@ -86,7 +86,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'space-between',
         padding: primitives.spacingMd,
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
       },
       title: {
         color: semantics.textPrimary,
diff --git a/package/src/components/Poll/components/CreatePollOptions.tsx b/package/src/components/Poll/components/CreatePollOptions.tsx
index 2bafed4678..f1ce64e4b4 100644
--- a/package/src/components/Poll/components/CreatePollOptions.tsx
+++ b/package/src/components/Poll/components/CreatePollOptions.tsx
@@ -763,7 +763,7 @@ const useStyles = () => {
       optionWrapper: {
         width: '100%',
         borderWidth: 1,
-        borderColor: semantics.inputBorderDefault,
+        borderColor: semantics.borderCoreDefault,
         borderRadius: primitives.radiusLg,
       },
       optionContent: {
diff --git a/package/src/components/Poll/components/MultipleAnswersField.tsx b/package/src/components/Poll/components/MultipleAnswersField.tsx
index f7cd0805ef..3c09f80e04 100644
--- a/package/src/components/Poll/components/MultipleAnswersField.tsx
+++ b/package/src/components/Poll/components/MultipleAnswersField.tsx
@@ -64,7 +64,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       multipleAnswersWrapper: {
-        backgroundColor: semantics.inputOptionCardBg,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
         padding: primitives.spacingMd,
         borderRadius: primitives.radiusLg,
         gap: primitives.spacingMd,
diff --git a/package/src/components/Poll/components/PollAnswersList.tsx b/package/src/components/Poll/components/PollAnswersList.tsx
index 12ab7c1f89..a6c9bcc097 100644
--- a/package/src/components/Poll/components/PollAnswersList.tsx
+++ b/package/src/components/Poll/components/PollAnswersList.tsx
@@ -175,7 +175,7 @@ const useStyles = () => {
         container: {
           flex: 1,
           padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         listItemAnswerText: {
           fontSize: primitives.typographyFontSizeMd,
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index 6abdcdae6f..b9aea47c7b 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -273,7 +273,7 @@ const useStyles = () => {
           : semantics.chatBorderOnChatIncoming,
       },
       safeArea: {
-        backgroundColor: semantics.backgroundElevationElevation1,
+        backgroundColor: semantics.backgroundCoreElevation1,
         flex: 1,
       },
     });
diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx
index 0f2f0d36f9..3b699f47d7 100644
--- a/package/src/components/Poll/components/PollModalHeader.tsx
+++ b/package/src/components/Poll/components/PollModalHeader.tsx
@@ -57,7 +57,7 @@ const useStyles = () => {
           justifyContent: 'space-between',
           paddingHorizontal: primitives.spacingMd,
           paddingVertical: 10,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         centerContainer: {
           alignItems: 'center',
diff --git a/package/src/components/Poll/components/PollOption.tsx b/package/src/components/Poll/components/PollOption.tsx
index 83dac6f79d..8e72aad7ea 100644
--- a/package/src/components/Poll/components/PollOption.tsx
+++ b/package/src/components/Poll/components/PollOption.tsx
@@ -191,7 +191,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         styles.voteContainer,
         {
           borderWidth: hasVote ? 0 : 1,
-          backgroundColor: hasVote ? semantics.controlRadiocheckBgSelected : 'transparent',
+          backgroundColor: hasVote ? semantics.accentPrimary : 'transparent',
           borderColor: isPollCreatedByClient
             ? semantics.chatBorderOnChatOutgoing
             : semantics.chatBorderOnChatIncoming,
@@ -199,9 +199,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         voteButtonContainer,
       ]}
     >
-      {hasVote ? (
-        <Check height={20} stroke={semantics.controlRadiocheckIconSelected} width={20} />
-      ) : null}
+      {hasVote ? <Check height={20} stroke={semantics.textOnAccent} width={20} /> : null}
     </Pressable>
   ) : null;
 };
@@ -279,7 +277,7 @@ const useAllOptionStyles = () => {
         allOptionsWrapper: {
           flex: 1,
           padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         optionWrapper: {
           paddingVertical: primitives.spacingMd,
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 812ff835d5..f6a3cb830a 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -164,7 +164,7 @@ const useStyles = () => {
           marginLeft: primitives.spacingMd,
         },
         safeArea: {
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
           flex: 1,
         },
       }),
diff --git a/package/src/components/Poll/components/PollResults/PollResults.tsx b/package/src/components/Poll/components/PollResults/PollResults.tsx
index 8a6d5e0905..8631797fef 100644
--- a/package/src/components/Poll/components/PollResults/PollResults.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResults.tsx
@@ -88,7 +88,7 @@ const useStyles = () => {
         scrollView: {
           flex: 1,
           padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         resultsContainer: {
           paddingVertical: primitives.spacing2xl,
diff --git a/package/src/components/Reply/Reply.tsx b/package/src/components/Reply/Reply.tsx
index 1f9a39dd7c..339981bfb2 100644
--- a/package/src/components/Reply/Reply.tsx
+++ b/package/src/components/Reply/Reply.tsx
@@ -270,7 +270,7 @@ const useStyles = () => {
           width: 40,
         },
         contentBorder: {
-          borderColor: semantics.borderCoreOpacity10,
+          borderColor: semantics.borderCoreOpacitySubtle,
         },
         dismissWrapper: {
           position: 'absolute',
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 8559374ad1..7040f157e9 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -406,7 +406,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "backgroundColor": "#fcd579",
                                   },
                                   {
-                                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                                    "borderColor": "rgba(26, 27, 37, 0.1)",
                                     "borderWidth": 1,
                                   },
                                   undefined,
@@ -736,7 +736,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "backgroundColor": "#8febbd",
                                   },
                                   {
-                                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                                    "borderColor": "rgba(26, 27, 37, 0.1)",
                                     "borderWidth": 1,
                                   },
                                   undefined,
@@ -1099,7 +1099,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "backgroundColor": "#fcd579",
                                   },
                                   {
-                                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                                    "borderColor": "rgba(26, 27, 37, 0.1)",
                                     "borderWidth": 1,
                                   },
                                   undefined,
@@ -1420,7 +1420,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "backgroundColor": "#8febbd",
                                 },
                                 {
-                                  "borderColor": "rgba(0, 0, 0, 0.1)",
+                                  "borderColor": "rgba(26, 27, 37, 0.1)",
                                   "borderWidth": 1,
                                 },
                                 undefined,
diff --git a/package/src/components/ThreadList/ThreadListItem.tsx b/package/src/components/ThreadList/ThreadListItem.tsx
index 5d8cb5f7b8..d44b65fd7e 100644
--- a/package/src/components/ThreadList/ThreadListItem.tsx
+++ b/package/src/components/ThreadList/ThreadListItem.tsx
@@ -73,7 +73,7 @@ export const ThreadListItemComponent = () => {
         }}
         style={({ pressed }) => [
           styles.container,
-          { backgroundColor: pressed ? semantics.backgroundCorePressed : 'transparent' },
+          { backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent' },
         ]}
         testID='thread-list-item'
       >
diff --git a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
index 080993f958..fe3899a644 100644
--- a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
+++ b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx
@@ -62,7 +62,7 @@ export const ThreadListUnreadBanner = () => {
         styles.container,
         {
           backgroundColor: pressed
-            ? semantics.backgroundCorePressed
+            ? semantics.backgroundUtilityPressed
             : semantics.backgroundCoreSurface,
         },
       ]}
diff --git a/package/src/components/UIComponents/BottomSheetModal.tsx b/package/src/components/UIComponents/BottomSheetModal.tsx
index 99488f6e82..fe0aea695c 100644
--- a/package/src/components/UIComponents/BottomSheetModal.tsx
+++ b/package/src/components/UIComponents/BottomSheetModal.tsx
@@ -418,7 +418,7 @@ const useStyles = () => {
         container: {
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
-          backgroundColor: semantics.backgroundElevationElevation1,
+          backgroundColor: semantics.backgroundCoreElevation1,
         },
         contentContainer: {
           flex: 1,
@@ -444,6 +444,6 @@ const useStyles = () => {
           flex: 1,
         },
       }),
-    [semantics.backgroundCoreScrim, semantics.backgroundElevationElevation1],
+    [semantics.backgroundCoreScrim, semantics.backgroundCoreElevation1],
   );
 };
diff --git a/package/src/components/ui/Avatar/Avatar.tsx b/package/src/components/ui/Avatar/Avatar.tsx
index 2ab75b1b2e..aaff3a3114 100644
--- a/package/src/components/ui/Avatar/Avatar.tsx
+++ b/package/src/components/ui/Avatar/Avatar.tsx
@@ -65,12 +65,12 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { borderCoreOpacity10 } = semantics;
+  const { borderCoreOpacitySubtle } = semantics;
   return useMemo(
     () =>
       StyleSheet.create({
         border: {
-          borderColor: borderCoreOpacity10,
+          borderColor: borderCoreOpacitySubtle,
           borderWidth: 1,
         },
         container: {
@@ -81,6 +81,6 @@ const useStyles = () => {
         },
         image: {},
       }),
-    [borderCoreOpacity10],
+    [borderCoreOpacitySubtle],
   );
 };
diff --git a/package/src/components/ui/Avatar/AvatarGroup.tsx b/package/src/components/ui/Avatar/AvatarGroup.tsx
index 8ec7c763a1..99ab1e9770 100644
--- a/package/src/components/ui/Avatar/AvatarGroup.tsx
+++ b/package/src/components/ui/Avatar/AvatarGroup.tsx
@@ -216,7 +216,7 @@ const useUserAvatarGroupStyles = () => {
       StyleSheet.create({
         userAvatarWrapper: {
           borderWidth: 2,
-          borderColor: semantics.borderCoreOnDark,
+          borderColor: semantics.borderCoreInverse,
           borderRadius: primitives.radiusMax,
         },
         onlineIndicatorWrapper: {
diff --git a/package/src/components/ui/Button/Button.tsx b/package/src/components/ui/Button/Button.tsx
index 9ab85fe340..f076ace546 100644
--- a/package/src/components/ui/Button/Button.tsx
+++ b/package/src/components/ui/Button/Button.tsx
@@ -98,9 +98,9 @@ export const Button = ({
         style={({ pressed }) => [
           {
             backgroundColor: pressed
-              ? semantics.backgroundCorePressed
+              ? semantics.backgroundUtilityPressed
               : selected
-                ? semantics.backgroundCoreSelected
+                ? semantics.backgroundUtilitySelected
                 : 'transparent',
             paddingHorizontal: iconOnly ? 0 : buttonPadding[size],
           },
diff --git a/package/src/components/ui/Button/hooks/useButtonStyles.ts b/package/src/components/ui/Button/hooks/useButtonStyles.ts
index e61e4754b7..1b9528bc7f 100644
--- a/package/src/components/ui/Button/hooks/useButtonStyles.ts
+++ b/package/src/components/ui/Button/hooks/useButtonStyles.ts
@@ -46,7 +46,7 @@ export const useButtonStyles = ({ variant, type }: ButtonStylesConfig) => {
         backgroundColor: semantics.buttonPrimaryBg,
         borderColor: undefined,
         disabledForegroundColor: semantics.textDisabled,
-        disabledBackgroundColor: semantics.backgroundCoreDisabled,
+        disabledBackgroundColor: semantics.backgroundUtilityDisabled,
         disabledBorderColor: undefined,
       },
       primaryOutline: {
@@ -70,7 +70,7 @@ export const useButtonStyles = ({ variant, type }: ButtonStylesConfig) => {
         backgroundColor: semantics.buttonSecondaryBg,
         borderColor: undefined,
         disabledForegroundColor: semantics.textDisabled,
-        disabledBackgroundColor: semantics.backgroundCoreDisabled,
+        disabledBackgroundColor: semantics.backgroundUtilityDisabled,
         disabledBorderColor: undefined,
       },
       secondaryOutline: {
@@ -94,7 +94,7 @@ export const useButtonStyles = ({ variant, type }: ButtonStylesConfig) => {
         backgroundColor: semantics.buttonDestructiveBg,
         borderColor: undefined,
         disabledForegroundColor: semantics.textDisabled,
-        disabledBackgroundColor: semantics.backgroundCoreDisabled,
+        disabledBackgroundColor: semantics.backgroundUtilityDisabled,
         disabledBorderColor: undefined,
       },
       destructiveOutline: {
diff --git a/package/src/components/ui/Input/Input.tsx b/package/src/components/ui/Input/Input.tsx
index 9451ab22f1..e63dad68d2 100644
--- a/package/src/components/ui/Input/Input.tsx
+++ b/package/src/components/ui/Input/Input.tsx
@@ -87,9 +87,10 @@ export const Input = ({
             borderWidth: variant === 'outline' ? 1 : 0,
             borderColor: !editable
               ? semantics.borderUtilityDisabled
-              : isFocused
-                ? semantics.inputBorderFocus
-                : semantics.inputBorderDefault,
+              : // TODO: V9: This should go away as it's the same style. In a separate PR though.
+                isFocused
+                ? semantics.borderCoreDefault
+                : semantics.borderCoreDefault,
           },
           containerStyle,
         ]}
@@ -179,7 +180,7 @@ const useStyles = () => {
         paddingHorizontal: primitives.spacingMd,
         paddingVertical: primitives.spacingSm,
         borderRadius: primitives.radiusLg,
-        borderColor: semantics.inputBorderDefault,
+        borderColor: semantics.borderCoreDefault,
         minHeight: 48,
       },
       textInput: {
diff --git a/package/src/components/ui/SpeedSettingsButton.tsx b/package/src/components/ui/SpeedSettingsButton.tsx
index c9da56aa96..9c4515e1bc 100644
--- a/package/src/components/ui/SpeedSettingsButton.tsx
+++ b/package/src/components/ui/SpeedSettingsButton.tsx
@@ -35,7 +35,7 @@ export const SpeedSettingsButton = ({
       style={({ pressed }) => [
         styles.container,
         {
-          backgroundColor: pressed ? semantics.backgroundCorePressed : 'transparent',
+          backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent',
         },
         containerStyle,
       ]}
diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx
index 01f27eda55..0a6dff217b 100644
--- a/package/src/components/ui/VideoPlayIndicator.tsx
+++ b/package/src/components/ui/VideoPlayIndicator.tsx
@@ -40,7 +40,7 @@ export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
   return (
     <View style={[styles.container, sizes[size]]}>
       <Play
-        fill={semantics.controlPlayControlIcon}
+        fill={semantics.controlPlayButtonIcon}
         height={iconSizes[size]}
         width={iconSizes[size]}
       />
@@ -53,16 +53,16 @@ const useStyles = () => {
     theme: { semantics },
   } = useTheme();
 
-  const { controlPlayControlBg } = semantics;
+  const { controlPlayButtonBg } = semantics;
 
   return useMemo(() => {
     return StyleSheet.create({
       container: {
         alignItems: 'center',
-        backgroundColor: controlPlayControlBg,
+        backgroundColor: controlPlayButtonBg,
         borderRadius: primitives.radiusMax,
         justifyContent: 'center',
       },
     });
-  }, [controlPlayControlBg]);
+  }, [controlPlayButtonBg]);
 };
diff --git a/package/src/theme/StreamTokens.types.ts b/package/src/theme/StreamTokens.types.ts
deleted file mode 100644
index 8375e80891..0000000000
--- a/package/src/theme/StreamTokens.types.ts
+++ /dev/null
@@ -1,494 +0,0 @@
-// This file is autogenerated. Please do not edit it.
-
-import type { ColorValue, TextStyle, ViewStyle } from 'react-native';
-
-export type RNShadowToken = Required<
-  Pick<ViewStyle, 'elevation' | 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius'>
->;
-
-export interface FoundationsColors {
-  baseBlack: ColorValue;
-  baseTransparent0: ColorValue;
-  baseTransparentBlack10: ColorValue;
-  baseTransparentBlack5: ColorValue;
-  baseTransparentBlack70: ColorValue;
-  baseTransparentWhite10: ColorValue;
-  baseTransparentWhite20: ColorValue;
-  baseTransparentWhite70: ColorValue;
-  baseWhite: ColorValue;
-  blue100: ColorValue;
-  blue150: ColorValue;
-  blue200: ColorValue;
-  blue300: ColorValue;
-  blue400: ColorValue;
-  blue50: ColorValue;
-  blue500: ColorValue;
-  blue600: ColorValue;
-  blue700: ColorValue;
-  blue800: ColorValue;
-  blue900: ColorValue;
-  cyan100: ColorValue;
-  cyan150: ColorValue;
-  cyan200: ColorValue;
-  cyan300: ColorValue;
-  cyan400: ColorValue;
-  cyan50: ColorValue;
-  cyan500: ColorValue;
-  cyan600: ColorValue;
-  cyan700: ColorValue;
-  cyan800: ColorValue;
-  cyan900: ColorValue;
-  green100: ColorValue;
-  green150: ColorValue;
-  green200: ColorValue;
-  green300: ColorValue;
-  green400: ColorValue;
-  green50: ColorValue;
-  green500: ColorValue;
-  green600: ColorValue;
-  green700: ColorValue;
-  green800: ColorValue;
-  green900: ColorValue;
-  lime100: ColorValue;
-  lime150: ColorValue;
-  lime200: ColorValue;
-  lime300: ColorValue;
-  lime400: ColorValue;
-  lime50: ColorValue;
-  lime500: ColorValue;
-  lime600: ColorValue;
-  lime700: ColorValue;
-  lime800: ColorValue;
-  lime900: ColorValue;
-  neutral100: ColorValue;
-  neutral150: ColorValue;
-  neutral200: ColorValue;
-  neutral300: ColorValue;
-  neutral400: ColorValue;
-  neutral50: ColorValue;
-  neutral500: ColorValue;
-  neutral600: ColorValue;
-  neutral700: ColorValue;
-  neutral800: ColorValue;
-  neutral900: ColorValue;
-  purple100: ColorValue;
-  purple150: ColorValue;
-  purple200: ColorValue;
-  purple300: ColorValue;
-  purple400: ColorValue;
-  purple50: ColorValue;
-  purple500: ColorValue;
-  purple600: ColorValue;
-  purple700: ColorValue;
-  purple800: ColorValue;
-  purple900: ColorValue;
-  red100: ColorValue;
-  red150: ColorValue;
-  red200: ColorValue;
-  red300: ColorValue;
-  red400: ColorValue;
-  red50: ColorValue;
-  red500: ColorValue;
-  red600: ColorValue;
-  red700: ColorValue;
-  red800: ColorValue;
-  red900: ColorValue;
-  slate100: ColorValue;
-  slate150: ColorValue;
-  slate200: ColorValue;
-  slate300: ColorValue;
-  slate400: ColorValue;
-  slate50: ColorValue;
-  slate500: ColorValue;
-  slate600: ColorValue;
-  slate700: ColorValue;
-  slate800: ColorValue;
-  slate900: ColorValue;
-  violet100: ColorValue;
-  violet150: ColorValue;
-  violet200: ColorValue;
-  violet300: ColorValue;
-  violet400: ColorValue;
-  violet50: ColorValue;
-  violet500: ColorValue;
-  violet600: ColorValue;
-  violet700: ColorValue;
-  violet800: ColorValue;
-  violet900: ColorValue;
-  yellow100: ColorValue;
-  yellow150: ColorValue;
-  yellow200: ColorValue;
-  yellow300: ColorValue;
-  yellow400: ColorValue;
-  yellow50: ColorValue;
-  yellow500: ColorValue;
-  yellow600: ColorValue;
-  yellow700: ColorValue;
-  yellow800: ColorValue;
-  yellow900: ColorValue;
-}
-
-export interface FoundationsLayout {
-  size12: number;
-  size128: number;
-  size16: number;
-  size2: number;
-  size20: number;
-  size24: number;
-  size240: number;
-  size28: number;
-  size32: number;
-  size320: number;
-  size4: number;
-  size40: number;
-  size48: number;
-  size480: number;
-  size560: number;
-  size6: number;
-  size64: number;
-  size640: number;
-  size8: number;
-  size80: number;
-}
-
-export interface FoundationsRadius {
-  radius0: number;
-  radius12: number;
-  radius16: number;
-  radius2: number;
-  radius20: number;
-  radius24: number;
-  radius32: number;
-  radius4: number;
-  radius6: number;
-  radius8: number;
-  radiusFull: number;
-}
-
-export interface FoundationsSpacing {
-  space0: number;
-  space12: number;
-  space16: number;
-  space2: number;
-  space20: number;
-  space24: number;
-  space32: number;
-  space4: number;
-  space40: number;
-  space48: number;
-  space64: number;
-  space8: number;
-  space80: number;
-}
-
-export interface FoundationsStroke {
-  w100: number;
-  w120: number;
-  w150: number;
-  w200: number;
-  w300: number;
-  w400: number;
-}
-
-export interface FoundationsTypography {
-  fontFamilyGeist: TextStyle['fontFamily'];
-  fontFamilyGeistMono: TextStyle['fontFamily'];
-  fontFamilyRoboto: TextStyle['fontFamily'];
-  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'];
-  fontWeightW400: TextStyle['fontWeight'];
-  fontWeightW500: TextStyle['fontWeight'];
-  fontWeightW600: TextStyle['fontWeight'];
-  fontWeightW700: TextStyle['fontWeight'];
-  lineHeightLineHeight10: TextStyle['lineHeight'];
-  lineHeightLineHeight12: TextStyle['lineHeight'];
-  lineHeightLineHeight14: TextStyle['lineHeight'];
-  lineHeightLineHeight15: TextStyle['lineHeight'];
-  lineHeightLineHeight16: TextStyle['lineHeight'];
-  lineHeightLineHeight17: TextStyle['lineHeight'];
-  lineHeightLineHeight18: TextStyle['lineHeight'];
-  lineHeightLineHeight20: TextStyle['lineHeight'];
-  lineHeightLineHeight24: TextStyle['lineHeight'];
-  lineHeightLineHeight28: TextStyle['lineHeight'];
-  lineHeightLineHeight32: TextStyle['lineHeight'];
-  lineHeightLineHeight40: TextStyle['lineHeight'];
-  lineHeightLineHeight48: TextStyle['lineHeight'];
-  lineHeightLineHeight8: TextStyle['lineHeight'];
-}
-
-export interface ChatComponents {
-  buttonHitTargetMinHeight: number;
-  buttonHitTargetMinWidth: number;
-  buttonPaddingXIconOnlyLg: number;
-  buttonPaddingXIconOnlyMd: number;
-  buttonPaddingXIconOnlySm: number;
-  buttonPaddingXWithLabelLg: number;
-  buttonPaddingXWithLabelMd: number;
-  buttonPaddingXWithLabelSm: number;
-  buttonPaddingYLg: number;
-  buttonPaddingYMd: number;
-  buttonPaddingYSm: number;
-  buttonRadiusFull: number;
-  buttonRadiusLg: number;
-  buttonRadiusMd: number;
-  buttonRadiusSm: number;
-  buttonVisualHeightLg: number;
-  buttonVisualHeightMd: number;
-  buttonVisualHeightSm: number;
-  composerRadiusFixed: number;
-  composerRadiusFloating: number;
-  deviceRadius: number;
-  deviceSafeAreaBottom: number;
-  deviceSafeAreaTop: number;
-  iconSizeLg: number;
-  iconSizeMd: number;
-  iconSizeSm: number;
-  iconSizeXs: number;
-  iconStrokeDefault: number;
-  iconStrokeEmphasis: number;
-  iconStrokeSubtle: number;
-  messageBubbleRadiusAttachment: number;
-  messageBubbleRadiusAttachmentInline: number;
-  messageBubbleRadiusGroupBottom: number;
-  messageBubbleRadiusGroupMiddle: number;
-  messageBubbleRadiusGroupTop: number;
-  messageBubbleRadiusTail: number;
-}
-
-export interface ChatPrimitives {
-  darkElevation0: RNShadowToken;
-  darkElevation1: RNShadowToken;
-  darkElevation2: RNShadowToken;
-  darkElevation3: RNShadowToken;
-  darkElevation4: RNShadowToken;
-  lightElevation0: RNShadowToken;
-  lightElevation1: RNShadowToken;
-  lightElevation2: RNShadowToken;
-  lightElevation3: RNShadowToken;
-  lightElevation4: RNShadowToken;
-  radius2xl: number;
-  radius3xl: number;
-  radius4xl: number;
-  radiusLg: number;
-  radiusMax: number;
-  radiusMd: number;
-  radiusNone: number;
-  radiusSm: number;
-  radiusXl: number;
-  radiusXs: number;
-  radiusXxs: number;
-  spacing2xl: number;
-  spacing3xl: number;
-  spacingLg: number;
-  spacingMd: number;
-  spacingNone: number;
-  spacingSm: number;
-  spacingXl: number;
-  spacingXs: number;
-  spacingXxs: number;
-  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'];
-  typographyFontWeightBold: TextStyle['fontWeight'];
-  typographyFontWeightMedium: TextStyle['fontWeight'];
-  typographyFontWeightRegular: TextStyle['fontWeight'];
-  typographyFontWeightSemiBold: TextStyle['fontWeight'];
-  typographyLineHeightNormal: TextStyle['lineHeight'];
-  typographyLineHeightRelaxed: TextStyle['lineHeight'];
-  typographyLineHeightTight: TextStyle['lineHeight'];
-}
-
-export interface ChatSemantics {
-  accentBlack: ColorValue;
-  accentError: ColorValue;
-  accentNeutral: ColorValue;
-  accentPrimary: ColorValue;
-  accentSuccess: ColorValue;
-  accentWarning: ColorValue;
-  avatarBgDefault: ColorValue;
-  avatarBgPlaceholder: ColorValue;
-  avatarPaletteBg1: ColorValue;
-  avatarPaletteBg2: ColorValue;
-  avatarPaletteBg3: ColorValue;
-  avatarPaletteBg4: ColorValue;
-  avatarPaletteBg5: ColorValue;
-  avatarPaletteText1: ColorValue;
-  avatarPaletteText2: ColorValue;
-  avatarPaletteText3: ColorValue;
-  avatarPaletteText4: ColorValue;
-  avatarPaletteText5: ColorValue;
-  avatarTextDefault: ColorValue;
-  avatarTextPlaceholder: ColorValue;
-  backgroundCoreApp: ColorValue;
-  backgroundCoreDisabled: ColorValue;
-  backgroundCoreHover: ColorValue;
-  backgroundCoreOverlay: ColorValue;
-  backgroundCorePressed: ColorValue;
-  backgroundCoreScrim: ColorValue;
-  backgroundCoreSelected: ColorValue;
-  backgroundCoreSurface: ColorValue;
-  backgroundCoreSurfaceStrong: ColorValue;
-  backgroundCoreSurfaceSubtle: ColorValue;
-  backgroundElevationElevation0: ColorValue;
-  backgroundElevationElevation1: ColorValue;
-  backgroundElevationElevation2: ColorValue;
-  backgroundElevationElevation3: ColorValue;
-  backgroundElevationElevation4: ColorValue;
-  badgeBgDefault: ColorValue;
-  badgeBgError: ColorValue;
-  badgeBgInverse: ColorValue;
-  badgeBgNeutral: ColorValue;
-  badgeBgPrimary: ColorValue;
-  badgeBorder: ColorValue;
-  badgeText: ColorValue;
-  badgeTextInverse: ColorValue;
-  borderCoreDefault: ColorValue;
-  borderCoreOnAccent: ColorValue;
-  borderCoreOnDark: ColorValue;
-  borderCoreOpacity10: ColorValue;
-  borderCoreOpacity25: ColorValue;
-  borderCoreStrong: ColorValue;
-  borderCoreSubtle: ColorValue;
-  borderUtilityDisabled: ColorValue;
-  borderUtilityError: ColorValue;
-  borderUtilityFocus: ColorValue;
-  borderUtilitySelected: ColorValue;
-  borderUtilitySuccess: ColorValue;
-  borderUtilityWarning: ColorValue;
-  brand100: ColorValue;
-  brand150: ColorValue;
-  brand200: ColorValue;
-  brand300: ColorValue;
-  brand400: ColorValue;
-  brand50: ColorValue;
-  brand500: ColorValue;
-  brand600: ColorValue;
-  brand700: ColorValue;
-  brand800: ColorValue;
-  brand900: ColorValue;
-  buttonDestructiveBg: ColorValue;
-  buttonDestructiveBgLiquidGlass: ColorValue;
-  buttonDestructiveBorder: ColorValue;
-  buttonDestructiveText: ColorValue;
-  buttonDestructiveTextOnAccent: ColorValue;
-  buttonPrimaryBg: ColorValue;
-  buttonPrimaryBgLiquidGlass: ColorValue;
-  buttonPrimaryBorder: ColorValue;
-  buttonPrimaryText: ColorValue;
-  buttonPrimaryTextOnAccent: ColorValue;
-  buttonSecondaryBg: ColorValue;
-  buttonSecondaryBgLiquidGlass: ColorValue;
-  buttonSecondaryBorder: ColorValue;
-  buttonSecondaryText: ColorValue;
-  buttonSecondaryTextOnAccent: ColorValue;
-  chatBgAttachmentIncoming: ColorValue;
-  chatBgAttachmentOutgoing: ColorValue;
-  chatBgIncoming: ColorValue;
-  chatBgOutgoing: ColorValue;
-  chatBgTypingIndicator: ColorValue;
-  chatBorderIncoming: ColorValue;
-  chatBorderOnChatIncoming: ColorValue;
-  chatBorderOnChatOutgoing: ColorValue;
-  chatBorderOutgoing: ColorValue;
-  chatPollProgressFillIncoming: ColorValue;
-  chatPollProgressFillOutgoing: ColorValue;
-  chatPollProgressTrackIncoming: ColorValue;
-  chatPollProgressTrackOutgoing: ColorValue;
-  chatReplyIndicatorIncoming: ColorValue;
-  chatReplyIndicatorOutgoing: ColorValue;
-  chatTextLink: ColorValue;
-  chatTextMention: ColorValue;
-  chatTextMessage: ColorValue;
-  chatTextReaction: ColorValue;
-  chatTextSystem: ColorValue;
-  chatTextTimestamp: ColorValue;
-  chatTextUsername: ColorValue;
-  chatThreadConnectorIncoming: ColorValue;
-  chatThreadConnectorOutgoing: ColorValue;
-  chatWaveformBar: ColorValue;
-  chatWaveformBarPlaying: ColorValue;
-  composerBg: ColorValue;
-  controlPlayControlBg: ColorValue;
-  controlPlayControlBgInverse: ColorValue;
-  controlPlayControlBorder: ColorValue;
-  controlPlayControlIcon: ColorValue;
-  controlPlayControlIconInverse: ColorValue;
-  controlProgressBarFill: ColorValue;
-  controlProgressBarTrack: ColorValue;
-  controlRadiocheckBg: ColorValue;
-  controlRadiocheckBgSelected: ColorValue;
-  controlRadiocheckBorder: ColorValue;
-  controlRadiocheckIconSelected: ColorValue;
-  controlRemoveControlBg: ColorValue;
-  controlRemoveControlBorder: ColorValue;
-  controlRemoveControlIcon: ColorValue;
-  controlToggleSwitchBg: ColorValue;
-  controlToggleSwitchBgDisabled: ColorValue;
-  controlToggleSwitchBgSelected: ColorValue;
-  controlToggleSwitchKnob: ColorValue;
-  inputBorderDefault: ColorValue;
-  inputBorderFocus: ColorValue;
-  inputBorderHover: ColorValue;
-  inputSendIcon: ColorValue;
-  inputSendIconDisabled: ColorValue;
-  inputTextDefault: ColorValue;
-  inputTextDisabled: ColorValue;
-  inputTextIcon: ColorValue;
-  inputTextPlaceholder: ColorValue;
-  presenceBgOffline: ColorValue;
-  presenceBgOnline: ColorValue;
-  presenceBorder: ColorValue;
-  reactionBg: ColorValue;
-  reactionBorder: ColorValue;
-  reactionEmoji: ColorValue;
-  reactionText: ColorValue;
-  systemBgBlur: ColorValue;
-  systemCaret: ColorValue;
-  systemScrollbar: ColorValue;
-  systemText: ColorValue;
-  textDisabled: ColorValue;
-  textInverse: ColorValue;
-  textLink: ColorValue;
-  textOnAccent: ColorValue;
-  textPrimary: ColorValue;
-  textSecondary: ColorValue;
-  textTertiary: ColorValue;
-}
-
-export interface IStreamTokens {
-  foundations: {
-    colors: FoundationsColors;
-    layout: FoundationsLayout;
-    radius: FoundationsRadius;
-    spacing: FoundationsSpacing;
-    stroke: FoundationsStroke;
-    typography: FoundationsTypography;
-  };
-  components: ChatComponents;
-  primitives: ChatPrimitives;
-  semantics: ChatSemantics;
-}
diff --git a/package/src/theme/generated/StreamTokens.types.ts b/package/src/theme/generated/StreamTokens.types.ts
index 0fbae14c1e..d53aec82d3 100644
--- a/package/src/theme/generated/StreamTokens.types.ts
+++ b/package/src/theme/generated/StreamTokens.types.ts
@@ -14,6 +14,7 @@ export interface FoundationsColors {
   baseTransparentBlack70: ColorValue;
   baseTransparentWhite10: ColorValue;
   baseTransparentWhite20: ColorValue;
+  baseTransparentWhite30: ColorValue;
   baseTransparentWhite70: ColorValue;
   baseWhite: ColorValue;
   blue100: ColorValue;
@@ -131,9 +132,11 @@ export interface FoundationsColors {
 export interface FoundationsLayout {
   size12: number;
   size128: number;
+  size144: number;
   size16: number;
   size2: number;
   size20: number;
+  size208: number;
   size24: number;
   size240: number;
   size28: number;
@@ -143,10 +146,12 @@ export interface FoundationsLayout {
   size40: number;
   size48: number;
   size480: number;
+  size56: number;
   size560: number;
   size6: number;
   size64: number;
   size640: number;
+  size760: number;
   size8: number;
   size80: number;
 }
@@ -285,12 +290,10 @@ export interface ChatComponents {
 }
 
 export interface ChatPrimitives {
-  darkElevation0: RNShadowToken;
   darkElevation1: RNShadowToken;
   darkElevation2: RNShadowToken;
   darkElevation3: RNShadowToken;
   darkElevation4: RNShadowToken;
-  lightElevation0: RNShadowToken;
   lightElevation1: RNShadowToken;
   lightElevation2: RNShadowToken;
   lightElevation3: RNShadowToken;
@@ -336,7 +339,6 @@ export interface ChatPrimitives {
 }
 
 export interface ChatSemantics {
-  accentBlack: ColorValue;
   accentError: ColorValue;
   accentNeutral: ColorValue;
   accentPrimary: ColorValue;
@@ -354,28 +356,31 @@ export interface ChatSemantics {
   avatarPaletteText3: ColorValue;
   avatarPaletteText4: ColorValue;
   avatarPaletteText5: ColorValue;
+  avatarPresenceBgOffline: ColorValue;
+  avatarPresenceBgOnline: ColorValue;
+  avatarPresenceBorder: ColorValue;
   avatarTextDefault: ColorValue;
   avatarTextPlaceholder: ColorValue;
   backgroundCoreApp: ColorValue;
-  backgroundCoreDisabled: ColorValue;
+  backgroundCoreElevation0: ColorValue;
+  backgroundCoreElevation1: ColorValue;
+  backgroundCoreElevation2: ColorValue;
+  backgroundCoreElevation3: ColorValue;
+  backgroundCoreElevation4: ColorValue;
   backgroundCoreHighlight: ColorValue;
-  backgroundCoreHover: ColorValue;
   backgroundCoreInverse: ColorValue;
-  backgroundCoreOverlay: ColorValue;
+  backgroundCoreOnAccent: ColorValue;
   backgroundCoreOverlayDark: ColorValue;
   backgroundCoreOverlayLight: ColorValue;
-  backgroundCorePressed: ColorValue;
   backgroundCoreScrim: ColorValue;
-  backgroundCoreSelected: ColorValue;
   backgroundCoreSurface: ColorValue;
   backgroundCoreSurfaceCard: ColorValue;
   backgroundCoreSurfaceStrong: ColorValue;
   backgroundCoreSurfaceSubtle: ColorValue;
-  backgroundElevationElevation0: ColorValue;
-  backgroundElevationElevation1: ColorValue;
-  backgroundElevationElevation2: ColorValue;
-  backgroundElevationElevation3: ColorValue;
-  backgroundElevationElevation4: ColorValue;
+  backgroundUtilityDisabled: ColorValue;
+  backgroundUtilityHover: ColorValue;
+  backgroundUtilityPressed: ColorValue;
+  backgroundUtilitySelected: ColorValue;
   badgeBgDefault: ColorValue;
   badgeBgError: ColorValue;
   badgeBgInverse: ColorValue;
@@ -387,16 +392,18 @@ export interface ChatSemantics {
   badgeTextInverse: ColorValue;
   badgeTextOnAccent: ColorValue;
   borderCoreDefault: ColorValue;
+  borderCoreInverse: ColorValue;
   borderCoreOnAccent: ColorValue;
-  borderCoreOnDark: ColorValue;
-  borderCoreOnSurface: ColorValue;
-  borderCoreOpacity10: ColorValue;
-  borderCoreOpacity25: ColorValue;
+  borderCoreOpacityStrong: ColorValue;
+  borderCoreOpacitySubtle: ColorValue;
   borderCoreStrong: ColorValue;
   borderCoreSubtle: ColorValue;
+  borderUtilityActive: ColorValue;
   borderUtilityDisabled: ColorValue;
   borderUtilityError: ColorValue;
-  borderUtilityFocus: ColorValue;
+  borderUtilityFocused: ColorValue;
+  borderUtilityHover: ColorValue;
+  borderUtilityPressed: ColorValue;
   borderUtilitySelected: ColorValue;
   borderUtilitySuccess: ColorValue;
   borderUtilityWarning: ColorValue;
@@ -436,7 +443,6 @@ export interface ChatSemantics {
   chatBgAttachmentOutgoing: ColorValue;
   chatBgIncoming: ColorValue;
   chatBgOutgoing: ColorValue;
-  chatBgTypingIndicator: ColorValue;
   chatBorderIncoming: ColorValue;
   chatBorderOnChatIncoming: ColorValue;
   chatBorderOnChatOutgoing: ColorValue;
@@ -455,24 +461,47 @@ export interface ChatSemantics {
   chatTextRead: ColorValue;
   chatTextSystem: ColorValue;
   chatTextTimestamp: ColorValue;
+  chatTextTypingIndicator: ColorValue;
   chatTextUsername: ColorValue;
   chatThreadConnectorIncoming: ColorValue;
   chatThreadConnectorOutgoing: ColorValue;
   chatWaveformBar: ColorValue;
   chatWaveformBarPlaying: ColorValue;
-  chipBg: ColorValue;
-  chipText: ColorValue;
-  composerBg: ColorValue;
+  chrome0: ColorValue;
+  chrome100: ColorValue;
+  chrome1000: ColorValue;
+  chrome150: ColorValue;
+  chrome200: ColorValue;
+  chrome300: ColorValue;
+  chrome400: ColorValue;
+  chrome50: ColorValue;
+  chrome500: ColorValue;
+  chrome600: ColorValue;
+  chrome700: ColorValue;
+  chrome800: ColorValue;
+  chrome900: ColorValue;
+  controlCheckboxBg: ColorValue;
+  controlCheckboxBgSelected: ColorValue;
+  controlCheckboxBorder: ColorValue;
+  controlCheckboxIcon: ColorValue;
+  controlPlaybackThumbBgActive: ColorValue;
+  controlPlaybackThumbBgDefault: ColorValue;
+  controlPlaybackThumbBorderActive: ColorValue;
+  controlPlaybackThumbBorderDefault: ColorValue;
   controlPlaybackToggleBorder: ColorValue;
   controlPlaybackToggleText: ColorValue;
-  controlPlayControlBg: ColorValue;
-  controlPlayControlIcon: ColorValue;
+  controlPlayButtonBg: ColorValue;
+  controlPlayButtonIcon: ColorValue;
   controlProgressBarFill: ColorValue;
   controlProgressBarTrack: ColorValue;
-  controlRadiocheckBg: ColorValue;
-  controlRadiocheckBgSelected: ColorValue;
-  controlRadiocheckBorder: ColorValue;
-  controlRadiocheckIconSelected: ColorValue;
+  controlRadioButtonBg: ColorValue;
+  controlRadioButtonBgSelected: ColorValue;
+  controlRadioButtonBorder: ColorValue;
+  controlRadioButtonIndicator: ColorValue;
+  controlRadioCheckBg: ColorValue;
+  controlRadioCheckBgSelected: ColorValue;
+  controlRadioCheckBorder: ColorValue;
+  controlRadioCheckIcon: ColorValue;
   controlRemoveControlBg: ColorValue;
   controlRemoveControlBorder: ColorValue;
   controlRemoveControlIcon: ColorValue;
@@ -480,11 +509,6 @@ export interface ChatSemantics {
   controlToggleSwitchBgDisabled: ColorValue;
   controlToggleSwitchBgSelected: ColorValue;
   controlToggleSwitchKnob: ColorValue;
-  inputBorderDefault: ColorValue;
-  inputBorderFocus: ColorValue;
-  inputBorderHover: ColorValue;
-  inputBorderSelected: ColorValue;
-  inputOptionCardBg: ColorValue;
   inputSendIcon: ColorValue;
   inputSendIconDisabled: ColorValue;
   inputTextDefault: ColorValue;
@@ -508,7 +532,6 @@ export interface ChatSemantics {
   textInverse: ColorValue;
   textLink: ColorValue;
   textOnAccent: ColorValue;
-  textOnDark: ColorValue;
   textPrimary: ColorValue;
   textSecondary: ColorValue;
   textTertiary: ColorValue;
diff --git a/package/src/theme/generated/dark/StreamTokens.android.ts b/package/src/theme/generated/dark/StreamTokens.android.ts
index 7110cd1d32..fac7d97023 100644
--- a/package/src/theme/generated/dark/StreamTokens.android.ts
+++ b/package/src/theme/generated/dark/StreamTokens.android.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.28)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.5136000000000001,
     shadowRadius: 16.892307692307693,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 1,
     shadowColor: 'rgba(0,0,0,0.2)',
@@ -330,17 +315,17 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.40959999999999996,
     shadowRadius: 16.919999999999998,
   },
-  radius2xl: foundations.radius.radius16,
-  radius3xl: foundations.radius.radius20,
-  radius4xl: foundations.radius.radius24,
-  radiusLg: foundations.radius.radius8,
+  radius2xl: foundations.radius.radius20,
+  radius3xl: foundations.radius.radius24,
+  radius4xl: foundations.radius.radius32,
+  radiusLg: foundations.radius.radius12,
   radiusMax: foundations.radius.radiusFull,
-  radiusMd: foundations.radius.radius6,
+  radiusMd: foundations.radius.radius8,
   radiusNone: foundations.radius.radius0,
-  radiusSm: foundations.radius.radius4,
-  radiusXl: foundations.radius.radius12,
-  radiusXs: foundations.radius.radius2,
-  radiusXxs: foundations.radius.radius0,
+  radiusSm: foundations.radius.radius6,
+  radiusXl: foundations.radius.radius16,
+  radiusXs: foundations.radius.radius4,
+  radiusXxs: foundations.radius.radius2,
   spacing2xl: foundations.spacing.space32,
   spacing3xl: foundations.spacing.space40,
   spacingLg: foundations.spacing.space20,
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral300,
-  accentPrimary: '$brand500',
+  accentNeutral: '$chrome500',
+  accentPrimary: '$brand400',
   accentSuccess: foundations.colors.green300,
   accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.neutral700,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue600,
   avatarPaletteBg2: foundations.colors.cyan600,
   avatarPaletteBg3: foundations.colors.green600,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green100,
   avatarPaletteText4: foundations.colors.purple100,
   avatarPaletteText5: foundations.colors.yellow100,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.neutral400,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.neutral800,
-  backgroundCoreHighlight: foundations.colors.yellow900,
-  backgroundCoreHover: 'rgba(255, 255, 255, 0.15)',
-  backgroundCoreInverse: foundations.colors.neutral50,
-  backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)',
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome50',
+  backgroundCoreElevation2: '$chrome100',
+  backgroundCoreElevation3: '$chrome200',
+  backgroundCoreElevation4: '$chrome300',
+  backgroundCoreHighlight: foundations.colors.yellow800,
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
   backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
-  backgroundCorePressed: 'rgba(255, 255, 255, 0.2)',
   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,
-  backgroundElevationElevation1: foundations.colors.neutral900,
-  backgroundElevationElevation2: foundations.colors.neutral800,
-  backgroundElevationElevation3: foundations.colors.neutral700,
-  backgroundElevationElevation4: foundations.colors.neutral600,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome100',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(255, 255, 255, 0.15)',
+  backgroundUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  backgroundUtilitySelected: 'rgba(255, 255, 255, 0.25)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.neutral600,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.neutral900,
-  borderCoreOnSurface: foundations.colors.neutral500,
-  borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)',
-  borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)',
-  borderCoreStrong: foundations.colors.neutral400,
-  borderCoreSubtle: foundations.colors.neutral800,
-  borderUtilityDisabled: foundations.colors.neutral700,
+  borderCoreDefault: '$chrome200',
+  borderCoreInverse: '$chrome1000',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
+  borderUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  borderUtilitySelected: 'rgba(255, 255, 255, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue900,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue100,
   brand900: foundations.colors.blue50,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$textInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand200',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseBlack,
+  chrome50: foundations.colors.neutral900,
+  chrome100: foundations.colors.neutral800,
+  chrome150: foundations.colors.neutral700,
+  chrome200: foundations.colors.neutral600,
+  chrome300: foundations.colors.neutral500,
+  chrome400: foundations.colors.neutral400,
+  chrome500: foundations.colors.neutral300,
+  chrome600: foundations.colors.neutral200,
+  chrome700: foundations.colors.neutral150,
+  chrome800: foundations.colors.neutral100,
+  chrome900: foundations.colors.neutral50,
+  chrome1000: foundations.colors.baseWhite,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreInverse',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: foundations.colors.baseWhite,
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,23 +582,22 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
   skeletonLoadingBase: foundations.colors.baseTransparent0,
   skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
-  systemCaret: foundations.colors.baseWhite,
+  systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
-  textDisabled: foundations.colors.neutral500,
-  textInverse: foundations.colors.baseBlack,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.neutral900,
-  textPrimary: foundations.colors.baseWhite,
-  textSecondary: foundations.colors.neutral100,
-  textTertiary: foundations.colors.neutral300,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand600',
+  textOnAccent: '$chrome1000',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;
diff --git a/package/src/theme/generated/dark/StreamTokens.ios.ts b/package/src/theme/generated/dark/StreamTokens.ios.ts
index b9c71e177d..3d07e6b5c3 100644
--- a/package/src/theme/generated/dark/StreamTokens.ios.ts
+++ b/package/src/theme/generated/dark/StreamTokens.ios.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.20)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.28,
     shadowRadius: 24.000000000000004,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.12)',
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral300,
-  accentPrimary: '$brand500',
+  accentNeutral: '$chrome500',
+  accentPrimary: '$brand400',
   accentSuccess: foundations.colors.green300,
   accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.neutral700,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue600,
   avatarPaletteBg2: foundations.colors.cyan600,
   avatarPaletteBg3: foundations.colors.green600,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green100,
   avatarPaletteText4: foundations.colors.purple100,
   avatarPaletteText5: foundations.colors.yellow100,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.neutral400,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.neutral800,
-  backgroundCoreHighlight: foundations.colors.yellow900,
-  backgroundCoreHover: 'rgba(255, 255, 255, 0.15)',
-  backgroundCoreInverse: foundations.colors.neutral50,
-  backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)',
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome50',
+  backgroundCoreElevation2: '$chrome100',
+  backgroundCoreElevation3: '$chrome200',
+  backgroundCoreElevation4: '$chrome300',
+  backgroundCoreHighlight: foundations.colors.yellow800,
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
   backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
-  backgroundCorePressed: 'rgba(255, 255, 255, 0.2)',
   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,
-  backgroundElevationElevation1: foundations.colors.neutral900,
-  backgroundElevationElevation2: foundations.colors.neutral800,
-  backgroundElevationElevation3: foundations.colors.neutral700,
-  backgroundElevationElevation4: foundations.colors.neutral600,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome100',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(255, 255, 255, 0.15)',
+  backgroundUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  backgroundUtilitySelected: 'rgba(255, 255, 255, 0.25)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.neutral600,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.neutral900,
-  borderCoreOnSurface: foundations.colors.neutral500,
-  borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)',
-  borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)',
-  borderCoreStrong: foundations.colors.neutral400,
-  borderCoreSubtle: foundations.colors.neutral800,
-  borderUtilityDisabled: foundations.colors.neutral700,
+  borderCoreDefault: '$chrome200',
+  borderCoreInverse: '$chrome1000',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
+  borderUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  borderUtilitySelected: 'rgba(255, 255, 255, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue900,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue100,
   brand900: foundations.colors.blue50,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$textInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand200',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseBlack,
+  chrome50: foundations.colors.neutral900,
+  chrome100: foundations.colors.neutral800,
+  chrome150: foundations.colors.neutral700,
+  chrome200: foundations.colors.neutral600,
+  chrome300: foundations.colors.neutral500,
+  chrome400: foundations.colors.neutral400,
+  chrome500: foundations.colors.neutral300,
+  chrome600: foundations.colors.neutral200,
+  chrome700: foundations.colors.neutral150,
+  chrome800: foundations.colors.neutral100,
+  chrome900: foundations.colors.neutral50,
+  chrome1000: foundations.colors.baseWhite,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreInverse',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: foundations.colors.baseWhite,
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,23 +582,22 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
   skeletonLoadingBase: foundations.colors.baseTransparent0,
   skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
-  systemCaret: foundations.colors.baseWhite,
+  systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
-  textDisabled: foundations.colors.neutral500,
-  textInverse: foundations.colors.baseBlack,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.neutral900,
-  textPrimary: foundations.colors.baseWhite,
-  textSecondary: foundations.colors.neutral100,
-  textTertiary: foundations.colors.neutral300,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand600',
+  textOnAccent: '$chrome1000',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;
diff --git a/package/src/theme/generated/dark/StreamTokens.web.ts b/package/src/theme/generated/dark/StreamTokens.web.ts
index e156d00f51..a1ef50ebc8 100644
--- a/package/src/theme/generated/dark/StreamTokens.web.ts
+++ b/package/src/theme/generated/dark/StreamTokens.web.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 3,
     shadowColor: 'rgba(0,0,0,0.1)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.48592,
     shadowRadius: 26.994206257242176,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 3,
     shadowColor: 'rgba(0,0,0,0.06)',
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red400,
-  accentNeutral: foundations.colors.neutral300,
-  accentPrimary: '$brand500',
+  accentNeutral: '$chrome500',
+  accentPrimary: '$brand400',
   accentSuccess: foundations.colors.green300,
   accentWarning: foundations.colors.yellow300,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.neutral700,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue600,
   avatarPaletteBg2: foundations.colors.cyan600,
   avatarPaletteBg3: foundations.colors.green600,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green100,
   avatarPaletteText4: foundations.colors.purple100,
   avatarPaletteText5: foundations.colors.yellow100,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.neutral400,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.neutral800,
-  backgroundCoreHighlight: foundations.colors.yellow900,
-  backgroundCoreHover: 'rgba(255, 255, 255, 0.15)',
-  backgroundCoreInverse: foundations.colors.neutral50,
-  backgroundCoreOverlay: 'rgba(0, 0, 0, 0.75)',
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome50',
+  backgroundCoreElevation2: '$chrome100',
+  backgroundCoreElevation3: '$chrome200',
+  backgroundCoreElevation4: '$chrome300',
+  backgroundCoreHighlight: foundations.colors.yellow800,
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
   backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
   backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
-  backgroundCorePressed: 'rgba(255, 255, 255, 0.2)',
   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,
-  backgroundElevationElevation1: foundations.colors.neutral900,
-  backgroundElevationElevation2: foundations.colors.neutral800,
-  backgroundElevationElevation3: foundations.colors.neutral700,
-  backgroundElevationElevation4: foundations.colors.neutral600,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome100',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(255, 255, 255, 0.15)',
+  backgroundUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  backgroundUtilitySelected: 'rgba(255, 255, 255, 0.25)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.neutral600,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.neutral900,
-  borderCoreOnSurface: foundations.colors.neutral500,
-  borderCoreOpacity10: 'rgba(255, 255, 255, 0.2)',
-  borderCoreOpacity25: 'rgba(255, 255, 255, 0.25)',
-  borderCoreStrong: foundations.colors.neutral400,
-  borderCoreSubtle: foundations.colors.neutral800,
-  borderUtilityDisabled: foundations.colors.neutral700,
+  borderCoreDefault: '$chrome200',
+  borderCoreInverse: '$chrome1000',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
+  borderUtilityPressed: 'rgba(255, 255, 255, 0.2)',
+  borderUtilitySelected: 'rgba(255, 255, 255, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue900,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue100,
   brand900: foundations.colors.blue50,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$textInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand200',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseBlack,
+  chrome50: foundations.colors.neutral900,
+  chrome100: foundations.colors.neutral800,
+  chrome150: foundations.colors.neutral700,
+  chrome200: foundations.colors.neutral600,
+  chrome300: foundations.colors.neutral500,
+  chrome400: foundations.colors.neutral400,
+  chrome500: foundations.colors.neutral300,
+  chrome600: foundations.colors.neutral200,
+  chrome700: foundations.colors.neutral150,
+  chrome800: foundations.colors.neutral100,
+  chrome900: foundations.colors.neutral50,
+  chrome1000: foundations.colors.baseWhite,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreInverse',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: foundations.colors.baseWhite,
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,23 +582,22 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
   skeletonLoadingBase: foundations.colors.baseTransparent0,
   skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
-  systemCaret: foundations.colors.baseWhite,
+  systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
   systemText: foundations.colors.baseWhite,
-  textDisabled: foundations.colors.neutral500,
-  textInverse: foundations.colors.baseBlack,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.neutral900,
-  textPrimary: foundations.colors.baseWhite,
-  textSecondary: foundations.colors.neutral100,
-  textTertiary: foundations.colors.neutral300,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand600',
+  textOnAccent: '$chrome1000',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts
deleted file mode 100644
index c687493303..0000000000
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.android.ts
+++ /dev/null
@@ -1,598 +0,0 @@
-// This file is autogenerated. Please do not edit it.
-
-import type { IStreamTokens } from '../StreamTokens.types';
-
-export const foundations: IStreamTokens['foundations'] = {
-  colors: {
-    baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
-    baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
-    baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
-    baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
-    baseBlack: '#000000',
-    baseWhite: '#ffffff',
-    slate50: '#f6f8fa',
-    slate100: '#ebeef1',
-    slate150: '#d5dbe1',
-    slate200: '#c0c8d2',
-    slate300: '#a3acba',
-    slate400: '#87909f',
-    slate500: '#687385',
-    slate600: '#545969',
-    slate700: '#414552',
-    slate800: '#30313d',
-    slate900: '#1a1b25',
-    neutral50: '#f8f8f8',
-    neutral100: '#efefef',
-    neutral150: '#d8d8d8',
-    neutral200: '#c4c4c4',
-    neutral300: '#ababab',
-    neutral400: '#8f8f8f',
-    neutral500: '#6a6a6a',
-    neutral600: '#565656',
-    neutral700: '#464646',
-    neutral800: '#323232',
-    neutral900: '#1c1c1c',
-    blue50: '#f3f7ff',
-    blue100: '#e3edff',
-    blue150: '#c3d9ff',
-    blue200: '#a5c5ff',
-    blue300: '#78a8ff',
-    blue400: '#4586ff',
-    blue500: '#005fff',
-    blue600: '#1b53bd',
-    blue700: '#19418d',
-    blue800: '#142f63',
-    blue900: '#091a3b',
-    cyan50: '#f1fbfc',
-    cyan100: '#d1f3f6',
-    cyan150: '#a9e4ea',
-    cyan200: '#72d7e0',
-    cyan300: '#45bcc7',
-    cyan400: '#1e9ea9',
-    cyan500: '#248088',
-    cyan600: '#006970',
-    cyan700: '#065056',
-    cyan800: '#003a3f',
-    cyan900: '#002124',
-    green50: '#e1ffee',
-    green100: '#bdfcdb',
-    green150: '#8febbd',
-    green200: '#59dea3',
-    green300: '#00c384',
-    green400: '#00a46e',
-    green500: '#277e59',
-    green600: '#006643',
-    green700: '#004f33',
-    green800: '#003a25',
-    green900: '#002213',
-    purple50: '#f7f8ff',
-    purple100: '#ecedff',
-    purple150: '#d4d7ff',
-    purple200: '#c1c5ff',
-    purple300: '#a1a3ff',
-    purple400: '#8482fc',
-    purple500: '#644af9',
-    purple600: '#553bd8',
-    purple700: '#4032a1',
-    purple800: '#2e2576',
-    purple900: '#1a114d',
-    yellow50: '#fef9da',
-    yellow100: '#fcedb9',
-    yellow150: '#fcd579',
-    yellow200: '#f6bf57',
-    yellow300: '#fa922b',
-    yellow400: '#f26d10',
-    yellow500: '#c84801',
-    yellow600: '#a82c00',
-    yellow700: '#842106',
-    yellow800: '#5f1a05',
-    yellow900: '#331302',
-    red50: '#fff5fa',
-    red100: '#ffe7f2',
-    red150: '#ffccdf',
-    red200: '#ffb1cd',
-    red300: '#fe87a1',
-    red400: '#fc526a',
-    red500: '#d90d10',
-    red600: '#b3093c',
-    red700: '#890d37',
-    red800: '#68052b',
-    red900: '#3e021a',
-    violet50: '#fef4ff',
-    violet100: '#fbe8fe',
-    violet150: '#f7cffc',
-    violet200: '#eeb5f4',
-    violet300: '#e68bec',
-    violet400: '#d75fe7',
-    violet500: '#b716ca',
-    violet600: '#9d00ae',
-    violet700: '#7c0089',
-    violet800: '#5c0066',
-    violet900: '#36003d',
-    lime50: '#f1fde8',
-    lime100: '#d4ffb0',
-    lime150: '#b1ee79',
-    lime200: '#9cda5d',
-    lime300: '#78c100',
-    lime400: '#639e11',
-    lime500: '#4b7a0a',
-    lime600: '#3e6213',
-    lime700: '#355315',
-    lime800: '#203a00',
-    lime900: '#112100',
-  },
-  layout: {
-    size2: 2,
-    size4: 4,
-    size6: 6,
-    size8: 8,
-    size12: 12,
-    size16: 16,
-    size20: 20,
-    size24: 24,
-    size32: 32,
-    size40: 40,
-    size48: 48,
-    size64: 64,
-    size28: 28,
-    size80: 80,
-    size128: 128,
-    size240: 240,
-    size320: 320,
-    size480: 480,
-    size560: 560,
-    size640: 640,
-  },
-  radius: {
-    radius0: 0,
-    radius2: 2,
-    radius4: 4,
-    radius6: 6,
-    radius8: 8,
-    radius12: 12,
-    radius16: 16,
-    radius20: 20,
-    radius24: 24,
-    radius32: 32,
-    radiusFull: 9999,
-  },
-  spacing: {
-    space0: 0,
-    space2: 2,
-    space4: 4,
-    space8: 8,
-    space12: 12,
-    space16: 16,
-    space20: 20,
-    space24: 24,
-    space32: 32,
-    space40: 40,
-    space48: 48,
-    space64: 64,
-    space80: 80,
-  },
-  stroke: {
-    w100: 1,
-    w150: 1.5,
-    w200: 2,
-    w300: 3,
-    w400: 4,
-    w120: 1.2,
-  },
-  typography: {
-    fontFamilyGeist: '"Geist"',
-    fontFamilyGeistMono: '"Geist Mono"',
-    fontFamilySfPro: '"SF Pro"',
-    fontFamilySfMono: '"SF Mono"',
-    fontFamilyRoboto: '"Roboto"',
-    fontFamilyRobotoMono: '"Roboto Mono"',
-    fontWeightW400: '400',
-    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,
-    fontSizeSize64: 64,
-    lineHeightLineHeight8: 8,
-    lineHeightLineHeight10: 10,
-    lineHeightLineHeight12: 12,
-    lineHeightLineHeight13: 13,
-    lineHeightLineHeight14: 14,
-    lineHeightLineHeight15: 15,
-    lineHeightLineHeight16: 16,
-    lineHeightLineHeight17: 17,
-    lineHeightLineHeight18: 18,
-    lineHeightLineHeight20: 20,
-    lineHeightLineHeight24: 24,
-    lineHeightLineHeight28: 28,
-    lineHeightLineHeight32: 32,
-    lineHeightLineHeight40: 40,
-    lineHeightLineHeight48: 48,
-  },
-};
-
-export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  darkElevation1: {
-    elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.28)',
-    shadowOffset: {
-      width: 0,
-      height: 1.4878048780487807,
-    },
-    shadowOpacity: 0.42400000000000004,
-    shadowRadius: 3.6926829268292685,
-  },
-  darkElevation2: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.30)',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.44000000000000006,
-    shadowRadius: 5.630769230769231,
-  },
-  darkElevation3: {
-    elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.32)',
-    shadowOffset: {
-      width: 0,
-      height: 3.488372093023256,
-    },
-    shadowOpacity: 0.4696,
-    shadowRadius: 11.079069767441862,
-  },
-  darkElevation4: {
-    elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.36)',
-    shadowOffset: {
-      width: 0,
-      height: 5.384615384615384,
-    },
-    shadowOpacity: 0.5136000000000001,
-    shadowRadius: 16.892307692307693,
-  },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  lightElevation1: {
-    elevation: 1,
-    shadowColor: 'rgba(0,0,0,0.2)',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.29599999999999993,
-    shadowRadius: 2.8285714285714287,
-  },
-  lightElevation2: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.3136,
-    shadowRadius: 5.68,
-  },
-  lightElevation3: {
-    elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
-    shadowOffset: {
-      width: 0,
-      height: 3.5,
-    },
-    shadowOpacity: 0.36160000000000003,
-    shadowRadius: 11.100000000000001,
-  },
-  lightElevation4: {
-    elevation: 8,
-    shadowColor: 'rgba(0,0,0,0.28)',
-    shadowOffset: {
-      width: 0,
-      height: 5.4,
-    },
-    shadowOpacity: 0.40959999999999996,
-    shadowRadius: 16.919999999999998,
-  },
-  radius2xl: foundations.radius.radius16,
-  radius3xl: foundations.radius.radius20,
-  radius4xl: foundations.radius.radius24,
-  radiusLg: foundations.radius.radius8,
-  radiusMax: foundations.radius.radiusFull,
-  radiusMd: foundations.radius.radius6,
-  radiusNone: foundations.radius.radius0,
-  radiusSm: foundations.radius.radius4,
-  radiusXl: foundations.radius.radius12,
-  radiusXs: foundations.radius.radius2,
-  radiusXxs: foundations.radius.radius0,
-  spacing2xl: foundations.spacing.space32,
-  spacing3xl: foundations.spacing.space40,
-  spacingLg: foundations.spacing.space20,
-  spacingMd: foundations.spacing.space16,
-  spacingNone: foundations.spacing.space0,
-  spacingSm: foundations.spacing.space12,
-  spacingXl: foundations.spacing.space24,
-  spacingXs: foundations.spacing.space8,
-  spacingXxs: foundations.spacing.space4,
-  spacingXxxs: foundations.spacing.space2,
-  typographyFontFamilyMono: foundations.typography.fontFamilyRobotoMono,
-  typographyFontFamilySans: foundations.typography.fontFamilyRoboto,
-  typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize18,
-  typographyFontSizeMd: foundations.typography.fontSizeSize16,
-  typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize14,
-  typographyFontSizeXl: foundations.typography.fontSizeSize20,
-  typographyFontSizeXs: foundations.typography.fontSizeSize12,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize10,
-  typographyFontWeightBold: 700,
-  typographyFontWeightMedium: 500,
-  typographyFontWeightRegular: 400,
-  typographyFontWeightSemiBold: 600,
-  typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20,
-  typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24,
-  typographyLineHeightTight: foundations.typography.lineHeightLineHeight16,
-} as const;
-
-export const components: IStreamTokens['components'] = {
-  buttonHitTargetMinHeight: foundations.layout.size48,
-  buttonHitTargetMinWidth: foundations.layout.size48,
-  buttonPaddingXIconOnlyLg: 14,
-  buttonPaddingXIconOnlyMd: 10,
-  buttonPaddingXIconOnlySm: 6,
-  buttonPaddingXIconOnlyXs: 4,
-  buttonPaddingXWithLabelLg: 16,
-  buttonPaddingXWithLabelMd: 16,
-  buttonPaddingXWithLabelSm: 16,
-  buttonPaddingXWithLabelXs: 12,
-  buttonPaddingYLg: 14,
-  buttonPaddingYMd: 10,
-  buttonPaddingYSm: 6,
-  buttonPaddingYXs: 4,
-  buttonRadiusFull: foundations.radius.radiusFull,
-  buttonRadiusLg: foundations.radius.radiusFull,
-  buttonRadiusMd: foundations.radius.radiusFull,
-  buttonRadiusSm: foundations.radius.radiusFull,
-  buttonVisualHeightLg: foundations.layout.size48,
-  buttonVisualHeightMd: foundations.layout.size40,
-  buttonVisualHeightSm: foundations.layout.size32,
-  buttonVisualHeightXs: foundations.layout.size24,
-  composerRadiusFixed: primitives.radius3xl,
-  composerRadiusFloating: primitives.radius3xl,
-  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,
-  iconSizeXs: foundations.layout.size12,
-  iconStrokeDefault: foundations.stroke.w150,
-  iconStrokeEmphasis: foundations.stroke.w200,
-  iconStrokeSubtle: foundations.stroke.w120,
-  messageBubbleRadiusAttachment: primitives.radiusLg,
-  messageBubbleRadiusAttachmentInline: primitives.radiusMd,
-  messageBubbleRadiusGroupBottom: primitives.radius2xl,
-  messageBubbleRadiusGroupMiddle: primitives.radius2xl,
-  messageBubbleRadiusGroupTop: primitives.radius2xl,
-  messageBubbleRadiusTail: primitives.radiusNone,
-} as const;
-
-export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
-  accentError: foundations.colors.baseBlack,
-  accentNeutral: foundations.colors.baseBlack,
-  accentPrimary: foundations.colors.baseBlack,
-  accentSuccess: foundations.colors.baseBlack,
-  accentWarning: foundations.colors.baseBlack,
-  avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: '$accentBlack',
-  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',
-  backgroundCoreDisabled: '$backgroundElevationElevation0',
-  backgroundCoreHighlight: foundations.colors.slate100,
-  backgroundCoreHover: 'rgba(0, 0, 0, 0.1)',
-  backgroundCoreInverse: '$accentBlack',
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
-  backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(0, 0, 0, 0.2)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
-  badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
-  badgeBgNeutral: '$accentNeutral',
-  badgeBgOverlay: '$backgroundCoreInverse',
-  badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
-  badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
-  badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: '$accentBlack',
-  borderCoreOnAccent: '$accentBlack',
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: '$accentBlack',
-  borderCoreOpacity10: '$accentBlack',
-  borderCoreOpacity25: '$accentBlack',
-  borderCoreStrong: '$accentBlack',
-  borderCoreSubtle: '$accentBlack',
-  borderUtilityDisabled: foundations.colors.slate300,
-  borderUtilityError: '$accentError',
-  borderUtilityFocus: '$accentBlack',
-  borderUtilitySelected: '$accentPrimary',
-  borderUtilitySuccess: '$accentSuccess',
-  borderUtilityWarning: '$accentWarning',
-  brand50: foundations.colors.baseBlack,
-  brand100: foundations.colors.baseBlack,
-  brand150: foundations.colors.baseBlack,
-  brand200: foundations.colors.baseBlack,
-  brand300: foundations.colors.baseBlack,
-  brand400: foundations.colors.baseBlack,
-  brand500: foundations.colors.baseBlack,
-  brand600: foundations.colors.baseBlack,
-  brand700: foundations.colors.baseBlack,
-  brand800: foundations.colors.baseBlack,
-  brand900: foundations.colors.baseBlack,
-  buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
-  buttonDestructiveText: '$accentError',
-  buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
-  buttonPrimaryBg: '$accentPrimary',
-  buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
-  buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
-  buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
-  buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
-  buttonSecondaryText: '$textPrimary',
-  buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
-  chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
-  chatBgAttachmentOutgoing: '$backgroundElevationElevation0',
-  chatBgIncoming: '$backgroundCoreSurface',
-  chatBgOutgoing: '$backgroundElevationElevation0',
-  chatBgTypingIndicator: '$accentNeutral',
-  chatBorderIncoming: '$borderCoreSubtle',
-  chatBorderOnChatIncoming: '$borderCoreStrong',
-  chatBorderOnChatOutgoing: '$accentBlack',
-  chatBorderOutgoing: '$accentBlack',
-  chatPollProgressFillIncoming: '$controlProgressBarFill',
-  chatPollProgressFillOutgoing: '$controlProgressBarFill',
-  chatPollProgressTrackIncoming: '$controlProgressBarTrack',
-  chatPollProgressTrackOutgoing: '$controlProgressBarTrack',
-  chatReplyIndicatorIncoming: foundations.colors.baseBlack,
-  chatReplyIndicatorOutgoing: foundations.colors.baseBlack,
-  chatTextIncoming: '$textPrimary',
-  chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
-  chatTextOutgoing: '$brand900',
-  chatTextReaction: '$textSecondary',
-  chatTextRead: '$accentPrimary',
-  chatTextSystem: '$textSecondary',
-  chatTextTimestamp: '$textTertiary',
-  chatTextUsername: '$textSecondary',
-  chatThreadConnectorIncoming: '$borderCoreDefault',
-  chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
-  chatWaveformBarPlaying: '$accentBlack',
-  chipBg: '$accentBlack',
-  chipText: '$textOnDark',
-  composerBg: '$backgroundElevationElevation1',
-  controlPlaybackToggleBorder: '$borderCoreDefault',
-  controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentNeutral',
-  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
-  controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilityFocus',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
-  inputSendIcon: '$accentPrimary',
-  inputSendIconDisabled: '$textDisabled',
-  inputTextDefault: '$textPrimary',
-  inputTextDisabled: '$textDisabled',
-  inputTextIcon: '$textTertiary',
-  inputTextPlaceholder: '$textTertiary',
-  presenceBgOffline: '$accentNeutral',
-  presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
-  reactionBorder: '$borderCoreDefault',
-  reactionEmoji: '$textPrimary',
-  reactionText: '$textPrimary',
-  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: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.baseBlack,
-  textSecondary: foundations.colors.neutral800,
-  textTertiary: foundations.colors.neutral700,
-} as const;
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts
deleted file mode 100644
index 70c26d120a..0000000000
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.ios.ts
+++ /dev/null
@@ -1,598 +0,0 @@
-// This file is autogenerated. Please do not edit it.
-
-import type { IStreamTokens } from '../StreamTokens.types';
-
-export const foundations: IStreamTokens['foundations'] = {
-  colors: {
-    baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
-    baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
-    baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
-    baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
-    baseBlack: '#000000',
-    baseWhite: '#ffffff',
-    slate50: '#f6f8fa',
-    slate100: '#ebeef1',
-    slate150: '#d5dbe1',
-    slate200: '#c0c8d2',
-    slate300: '#a3acba',
-    slate400: '#87909f',
-    slate500: '#687385',
-    slate600: '#545969',
-    slate700: '#414552',
-    slate800: '#30313d',
-    slate900: '#1a1b25',
-    neutral50: '#f8f8f8',
-    neutral100: '#efefef',
-    neutral150: '#d8d8d8',
-    neutral200: '#c4c4c4',
-    neutral300: '#ababab',
-    neutral400: '#8f8f8f',
-    neutral500: '#6a6a6a',
-    neutral600: '#565656',
-    neutral700: '#464646',
-    neutral800: '#323232',
-    neutral900: '#1c1c1c',
-    blue50: '#f3f7ff',
-    blue100: '#e3edff',
-    blue150: '#c3d9ff',
-    blue200: '#a5c5ff',
-    blue300: '#78a8ff',
-    blue400: '#4586ff',
-    blue500: '#005fff',
-    blue600: '#1b53bd',
-    blue700: '#19418d',
-    blue800: '#142f63',
-    blue900: '#091a3b',
-    cyan50: '#f1fbfc',
-    cyan100: '#d1f3f6',
-    cyan150: '#a9e4ea',
-    cyan200: '#72d7e0',
-    cyan300: '#45bcc7',
-    cyan400: '#1e9ea9',
-    cyan500: '#248088',
-    cyan600: '#006970',
-    cyan700: '#065056',
-    cyan800: '#003a3f',
-    cyan900: '#002124',
-    green50: '#e1ffee',
-    green100: '#bdfcdb',
-    green150: '#8febbd',
-    green200: '#59dea3',
-    green300: '#00c384',
-    green400: '#00a46e',
-    green500: '#277e59',
-    green600: '#006643',
-    green700: '#004f33',
-    green800: '#003a25',
-    green900: '#002213',
-    purple50: '#f7f8ff',
-    purple100: '#ecedff',
-    purple150: '#d4d7ff',
-    purple200: '#c1c5ff',
-    purple300: '#a1a3ff',
-    purple400: '#8482fc',
-    purple500: '#644af9',
-    purple600: '#553bd8',
-    purple700: '#4032a1',
-    purple800: '#2e2576',
-    purple900: '#1a114d',
-    yellow50: '#fef9da',
-    yellow100: '#fcedb9',
-    yellow150: '#fcd579',
-    yellow200: '#f6bf57',
-    yellow300: '#fa922b',
-    yellow400: '#f26d10',
-    yellow500: '#c84801',
-    yellow600: '#a82c00',
-    yellow700: '#842106',
-    yellow800: '#5f1a05',
-    yellow900: '#331302',
-    red50: '#fff5fa',
-    red100: '#ffe7f2',
-    red150: '#ffccdf',
-    red200: '#ffb1cd',
-    red300: '#fe87a1',
-    red400: '#fc526a',
-    red500: '#d90d10',
-    red600: '#b3093c',
-    red700: '#890d37',
-    red800: '#68052b',
-    red900: '#3e021a',
-    violet50: '#fef4ff',
-    violet100: '#fbe8fe',
-    violet150: '#f7cffc',
-    violet200: '#eeb5f4',
-    violet300: '#e68bec',
-    violet400: '#d75fe7',
-    violet500: '#b716ca',
-    violet600: '#9d00ae',
-    violet700: '#7c0089',
-    violet800: '#5c0066',
-    violet900: '#36003d',
-    lime50: '#f1fde8',
-    lime100: '#d4ffb0',
-    lime150: '#b1ee79',
-    lime200: '#9cda5d',
-    lime300: '#78c100',
-    lime400: '#639e11',
-    lime500: '#4b7a0a',
-    lime600: '#3e6213',
-    lime700: '#355315',
-    lime800: '#203a00',
-    lime900: '#112100',
-  },
-  layout: {
-    size2: 2,
-    size4: 4,
-    size6: 6,
-    size8: 8,
-    size12: 12,
-    size16: 16,
-    size20: 20,
-    size24: 24,
-    size32: 32,
-    size40: 40,
-    size48: 48,
-    size64: 64,
-    size28: 28,
-    size80: 80,
-    size128: 128,
-    size240: 240,
-    size320: 320,
-    size480: 480,
-    size560: 560,
-    size640: 640,
-  },
-  radius: {
-    radius0: 0,
-    radius2: 2,
-    radius4: 4,
-    radius6: 6,
-    radius8: 8,
-    radius12: 12,
-    radius16: 16,
-    radius20: 20,
-    radius24: 24,
-    radius32: 32,
-    radiusFull: 9999,
-  },
-  spacing: {
-    space0: 0,
-    space2: 2,
-    space4: 4,
-    space8: 8,
-    space12: 12,
-    space16: 16,
-    space20: 20,
-    space24: 24,
-    space32: 32,
-    space40: 40,
-    space48: 48,
-    space64: 64,
-    space80: 80,
-  },
-  stroke: {
-    w100: 1,
-    w150: 1.5,
-    w200: 2,
-    w300: 3,
-    w400: 4,
-    w120: 1.2,
-  },
-  typography: {
-    fontFamilyGeist: '"Geist"',
-    fontFamilyGeistMono: '"Geist Mono"',
-    fontFamilySfPro: '"SF Pro"',
-    fontFamilySfMono: '"SF Mono"',
-    fontFamilyRoboto: '"Roboto"',
-    fontFamilyRobotoMono: '"Roboto Mono"',
-    fontWeightW400: '400',
-    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,
-    fontSizeSize64: 64,
-    lineHeightLineHeight8: 8,
-    lineHeightLineHeight10: 10,
-    lineHeightLineHeight12: 12,
-    lineHeightLineHeight13: 13,
-    lineHeightLineHeight14: 14,
-    lineHeightLineHeight15: 15,
-    lineHeightLineHeight16: 16,
-    lineHeightLineHeight17: 17,
-    lineHeightLineHeight18: 18,
-    lineHeightLineHeight20: 20,
-    lineHeightLineHeight24: 24,
-    lineHeightLineHeight28: 28,
-    lineHeightLineHeight32: 32,
-    lineHeightLineHeight40: 40,
-    lineHeightLineHeight48: 48,
-  },
-};
-
-export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  darkElevation1: {
-    elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.20)',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.19999999999999996,
-    shadowRadius: 3,
-  },
-  darkElevation2: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.22)',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.21999999999999997,
-    shadowRadius: 6,
-  },
-  darkElevation3: {
-    elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.24)',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.24,
-    shadowRadius: 12.000000000000002,
-  },
-  darkElevation4: {
-    elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.28)',
-    shadowOffset: {
-      width: 0,
-      height: 8,
-    },
-    shadowOpacity: 0.28,
-    shadowRadius: 24.000000000000004,
-  },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  lightElevation1: {
-    elevation: 2,
-    shadowColor: 'rgba(0,0,0,0.12)',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.12,
-    shadowRadius: 3.0000000000000004,
-  },
-  lightElevation2: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.14)',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.14,
-    shadowRadius: 6.000000000000001,
-  },
-  lightElevation3: {
-    elevation: 6,
-    shadowColor: 'rgba(0,0,0,0.16)',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.16000000000000003,
-    shadowRadius: 12,
-  },
-  lightElevation4: {
-    elevation: 12,
-    shadowColor: 'rgba(0,0,0,0.20)',
-    shadowOffset: {
-      width: 0,
-      height: 8,
-    },
-    shadowOpacity: 0.19999999999999996,
-    shadowRadius: 24,
-  },
-  radius2xl: foundations.radius.radius20,
-  radius3xl: foundations.radius.radius24,
-  radius4xl: foundations.radius.radius32,
-  radiusLg: foundations.radius.radius12,
-  radiusMax: foundations.radius.radiusFull,
-  radiusMd: foundations.radius.radius8,
-  radiusNone: foundations.radius.radius0,
-  radiusSm: foundations.radius.radius6,
-  radiusXl: foundations.radius.radius16,
-  radiusXs: foundations.radius.radius4,
-  radiusXxs: foundations.radius.radius2,
-  spacing2xl: foundations.spacing.space32,
-  spacing3xl: foundations.spacing.space40,
-  spacingLg: foundations.spacing.space20,
-  spacingMd: foundations.spacing.space16,
-  spacingNone: foundations.spacing.space0,
-  spacingSm: foundations.spacing.space12,
-  spacingXl: foundations.spacing.space24,
-  spacingXs: foundations.spacing.space8,
-  spacingXxs: foundations.spacing.space4,
-  spacingXxxs: foundations.spacing.space2,
-  typographyFontFamilyMono: foundations.typography.fontFamilySfMono,
-  typographyFontFamilySans: foundations.typography.fontFamilySfPro,
-  typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize20,
-  typographyFontSizeMd: foundations.typography.fontSizeSize17,
-  typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize15,
-  typographyFontSizeXl: foundations.typography.fontSizeSize22,
-  typographyFontSizeXs: foundations.typography.fontSizeSize13,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize12,
-  typographyFontWeightBold: 700,
-  typographyFontWeightMedium: 500,
-  typographyFontWeightRegular: 400,
-  typographyFontWeightSemiBold: 600,
-  typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20,
-  typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24,
-  typographyLineHeightTight: foundations.typography.lineHeightLineHeight16,
-} as const;
-
-export const components: IStreamTokens['components'] = {
-  buttonHitTargetMinHeight: foundations.layout.size48,
-  buttonHitTargetMinWidth: foundations.layout.size48,
-  buttonPaddingXIconOnlyLg: 14,
-  buttonPaddingXIconOnlyMd: 10,
-  buttonPaddingXIconOnlySm: 6,
-  buttonPaddingXIconOnlyXs: 4,
-  buttonPaddingXWithLabelLg: 16,
-  buttonPaddingXWithLabelMd: 16,
-  buttonPaddingXWithLabelSm: 16,
-  buttonPaddingXWithLabelXs: 12,
-  buttonPaddingYLg: 14,
-  buttonPaddingYMd: 10,
-  buttonPaddingYSm: 6,
-  buttonPaddingYXs: 4,
-  buttonRadiusFull: foundations.radius.radiusFull,
-  buttonRadiusLg: foundations.radius.radiusFull,
-  buttonRadiusMd: foundations.radius.radiusFull,
-  buttonRadiusSm: foundations.radius.radiusFull,
-  buttonVisualHeightLg: foundations.layout.size48,
-  buttonVisualHeightMd: foundations.layout.size40,
-  buttonVisualHeightSm: foundations.layout.size32,
-  buttonVisualHeightXs: foundations.layout.size24,
-  composerRadiusFixed: primitives.radius3xl,
-  composerRadiusFloating: primitives.radius3xl,
-  deviceRadius: 62,
-  deviceSafeAreaBottom: foundations.spacing.space32,
-  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,
-  iconSizeXs: foundations.layout.size12,
-  iconStrokeDefault: foundations.stroke.w150,
-  iconStrokeEmphasis: foundations.stroke.w200,
-  iconStrokeSubtle: foundations.stroke.w120,
-  messageBubbleRadiusAttachment: primitives.radiusLg,
-  messageBubbleRadiusAttachmentInline: primitives.radiusMd,
-  messageBubbleRadiusGroupBottom: primitives.radius2xl,
-  messageBubbleRadiusGroupMiddle: primitives.radius2xl,
-  messageBubbleRadiusGroupTop: primitives.radius2xl,
-  messageBubbleRadiusTail: primitives.radiusNone,
-} as const;
-
-export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
-  accentError: foundations.colors.baseBlack,
-  accentNeutral: foundations.colors.baseBlack,
-  accentPrimary: foundations.colors.baseBlack,
-  accentSuccess: foundations.colors.baseBlack,
-  accentWarning: foundations.colors.baseBlack,
-  avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: '$accentBlack',
-  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',
-  backgroundCoreDisabled: '$backgroundElevationElevation0',
-  backgroundCoreHighlight: foundations.colors.slate100,
-  backgroundCoreHover: 'rgba(0, 0, 0, 0.1)',
-  backgroundCoreInverse: '$accentBlack',
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
-  backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(0, 0, 0, 0.2)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
-  badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
-  badgeBgNeutral: '$accentNeutral',
-  badgeBgOverlay: '$backgroundCoreInverse',
-  badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
-  badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
-  badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: '$accentBlack',
-  borderCoreOnAccent: '$accentBlack',
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: '$accentBlack',
-  borderCoreOpacity10: '$accentBlack',
-  borderCoreOpacity25: '$accentBlack',
-  borderCoreStrong: '$accentBlack',
-  borderCoreSubtle: '$accentBlack',
-  borderUtilityDisabled: foundations.colors.slate300,
-  borderUtilityError: '$accentError',
-  borderUtilityFocus: '$accentBlack',
-  borderUtilitySelected: '$accentPrimary',
-  borderUtilitySuccess: '$accentSuccess',
-  borderUtilityWarning: '$accentWarning',
-  brand50: foundations.colors.baseBlack,
-  brand100: foundations.colors.baseBlack,
-  brand150: foundations.colors.baseBlack,
-  brand200: foundations.colors.baseBlack,
-  brand300: foundations.colors.baseBlack,
-  brand400: foundations.colors.baseBlack,
-  brand500: foundations.colors.baseBlack,
-  brand600: foundations.colors.baseBlack,
-  brand700: foundations.colors.baseBlack,
-  brand800: foundations.colors.baseBlack,
-  brand900: foundations.colors.baseBlack,
-  buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
-  buttonDestructiveText: '$accentError',
-  buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
-  buttonPrimaryBg: '$accentPrimary',
-  buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
-  buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
-  buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
-  buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
-  buttonSecondaryText: '$textPrimary',
-  buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
-  chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
-  chatBgAttachmentOutgoing: '$backgroundElevationElevation0',
-  chatBgIncoming: '$backgroundCoreSurface',
-  chatBgOutgoing: '$backgroundElevationElevation0',
-  chatBgTypingIndicator: '$accentNeutral',
-  chatBorderIncoming: '$borderCoreSubtle',
-  chatBorderOnChatIncoming: '$borderCoreStrong',
-  chatBorderOnChatOutgoing: '$accentBlack',
-  chatBorderOutgoing: '$accentBlack',
-  chatPollProgressFillIncoming: '$controlProgressBarFill',
-  chatPollProgressFillOutgoing: '$controlProgressBarFill',
-  chatPollProgressTrackIncoming: '$controlProgressBarTrack',
-  chatPollProgressTrackOutgoing: '$controlProgressBarTrack',
-  chatReplyIndicatorIncoming: foundations.colors.baseBlack,
-  chatReplyIndicatorOutgoing: foundations.colors.baseBlack,
-  chatTextIncoming: '$textPrimary',
-  chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
-  chatTextOutgoing: '$brand900',
-  chatTextReaction: '$textSecondary',
-  chatTextRead: '$accentPrimary',
-  chatTextSystem: '$textSecondary',
-  chatTextTimestamp: '$textTertiary',
-  chatTextUsername: '$textSecondary',
-  chatThreadConnectorIncoming: '$borderCoreDefault',
-  chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
-  chatWaveformBarPlaying: '$accentBlack',
-  chipBg: '$accentBlack',
-  chipText: '$textOnDark',
-  composerBg: '$backgroundElevationElevation1',
-  controlPlaybackToggleBorder: '$borderCoreDefault',
-  controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentNeutral',
-  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
-  controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilityFocus',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
-  inputSendIcon: '$accentPrimary',
-  inputSendIconDisabled: '$textDisabled',
-  inputTextDefault: '$textPrimary',
-  inputTextDisabled: '$textDisabled',
-  inputTextIcon: '$textTertiary',
-  inputTextPlaceholder: '$textTertiary',
-  presenceBgOffline: '$accentNeutral',
-  presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
-  reactionBorder: '$borderCoreDefault',
-  reactionEmoji: '$textPrimary',
-  reactionText: '$textPrimary',
-  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: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.baseBlack,
-  textSecondary: foundations.colors.neutral800,
-  textTertiary: foundations.colors.neutral700,
-} as const;
diff --git a/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts b/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts
deleted file mode 100644
index ddcc2de26e..0000000000
--- a/package/src/theme/generated/high-contrast-light/StreamTokens.web.ts
+++ /dev/null
@@ -1,598 +0,0 @@
-// This file is autogenerated. Please do not edit it.
-
-import type { IStreamTokens } from '../StreamTokens.types';
-
-export const foundations: IStreamTokens['foundations'] = {
-  colors: {
-    baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
-    baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
-    baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
-    baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
-    baseBlack: '#000000',
-    baseWhite: '#ffffff',
-    slate50: '#f6f8fa',
-    slate100: '#ebeef1',
-    slate150: '#d5dbe1',
-    slate200: '#c0c8d2',
-    slate300: '#a3acba',
-    slate400: '#87909f',
-    slate500: '#687385',
-    slate600: '#545969',
-    slate700: '#414552',
-    slate800: '#30313d',
-    slate900: '#1a1b25',
-    neutral50: '#f8f8f8',
-    neutral100: '#efefef',
-    neutral150: '#d8d8d8',
-    neutral200: '#c4c4c4',
-    neutral300: '#ababab',
-    neutral400: '#8f8f8f',
-    neutral500: '#6a6a6a',
-    neutral600: '#565656',
-    neutral700: '#464646',
-    neutral800: '#323232',
-    neutral900: '#1c1c1c',
-    blue50: '#f3f7ff',
-    blue100: '#e3edff',
-    blue150: '#c3d9ff',
-    blue200: '#a5c5ff',
-    blue300: '#78a8ff',
-    blue400: '#4586ff',
-    blue500: '#005fff',
-    blue600: '#1b53bd',
-    blue700: '#19418d',
-    blue800: '#142f63',
-    blue900: '#091a3b',
-    cyan50: '#f1fbfc',
-    cyan100: '#d1f3f6',
-    cyan150: '#a9e4ea',
-    cyan200: '#72d7e0',
-    cyan300: '#45bcc7',
-    cyan400: '#1e9ea9',
-    cyan500: '#248088',
-    cyan600: '#006970',
-    cyan700: '#065056',
-    cyan800: '#003a3f',
-    cyan900: '#002124',
-    green50: '#e1ffee',
-    green100: '#bdfcdb',
-    green150: '#8febbd',
-    green200: '#59dea3',
-    green300: '#00c384',
-    green400: '#00a46e',
-    green500: '#277e59',
-    green600: '#006643',
-    green700: '#004f33',
-    green800: '#003a25',
-    green900: '#002213',
-    purple50: '#f7f8ff',
-    purple100: '#ecedff',
-    purple150: '#d4d7ff',
-    purple200: '#c1c5ff',
-    purple300: '#a1a3ff',
-    purple400: '#8482fc',
-    purple500: '#644af9',
-    purple600: '#553bd8',
-    purple700: '#4032a1',
-    purple800: '#2e2576',
-    purple900: '#1a114d',
-    yellow50: '#fef9da',
-    yellow100: '#fcedb9',
-    yellow150: '#fcd579',
-    yellow200: '#f6bf57',
-    yellow300: '#fa922b',
-    yellow400: '#f26d10',
-    yellow500: '#c84801',
-    yellow600: '#a82c00',
-    yellow700: '#842106',
-    yellow800: '#5f1a05',
-    yellow900: '#331302',
-    red50: '#fff5fa',
-    red100: '#ffe7f2',
-    red150: '#ffccdf',
-    red200: '#ffb1cd',
-    red300: '#fe87a1',
-    red400: '#fc526a',
-    red500: '#d90d10',
-    red600: '#b3093c',
-    red700: '#890d37',
-    red800: '#68052b',
-    red900: '#3e021a',
-    violet50: '#fef4ff',
-    violet100: '#fbe8fe',
-    violet150: '#f7cffc',
-    violet200: '#eeb5f4',
-    violet300: '#e68bec',
-    violet400: '#d75fe7',
-    violet500: '#b716ca',
-    violet600: '#9d00ae',
-    violet700: '#7c0089',
-    violet800: '#5c0066',
-    violet900: '#36003d',
-    lime50: '#f1fde8',
-    lime100: '#d4ffb0',
-    lime150: '#b1ee79',
-    lime200: '#9cda5d',
-    lime300: '#78c100',
-    lime400: '#639e11',
-    lime500: '#4b7a0a',
-    lime600: '#3e6213',
-    lime700: '#355315',
-    lime800: '#203a00',
-    lime900: '#112100',
-  },
-  layout: {
-    size2: 2,
-    size4: 4,
-    size6: 6,
-    size8: 8,
-    size12: 12,
-    size16: 16,
-    size20: 20,
-    size24: 24,
-    size32: 32,
-    size40: 40,
-    size48: 48,
-    size64: 64,
-    size28: 28,
-    size80: 80,
-    size128: 128,
-    size240: 240,
-    size320: 320,
-    size480: 480,
-    size560: 560,
-    size640: 640,
-  },
-  radius: {
-    radius0: 0,
-    radius2: 2,
-    radius4: 4,
-    radius6: 6,
-    radius8: 8,
-    radius12: 12,
-    radius16: 16,
-    radius20: 20,
-    radius24: 24,
-    radius32: 32,
-    radiusFull: 9999,
-  },
-  spacing: {
-    space0: 0,
-    space2: 2,
-    space4: 4,
-    space8: 8,
-    space12: 12,
-    space16: 16,
-    space20: 20,
-    space24: 24,
-    space32: 32,
-    space40: 40,
-    space48: 48,
-    space64: 64,
-    space80: 80,
-  },
-  stroke: {
-    w100: 1,
-    w150: 1.5,
-    w200: 2,
-    w300: 3,
-    w400: 4,
-    w120: 1.2,
-  },
-  typography: {
-    fontFamilyGeist: '"Geist"',
-    fontFamilyGeistMono: '"Geist Mono"',
-    fontFamilySfPro: '"SF Pro"',
-    fontFamilySfMono: '"SF Mono"',
-    fontFamilyRoboto: '"Roboto"',
-    fontFamilyRobotoMono: '"Roboto Mono"',
-    fontWeightW400: '400',
-    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,
-    fontSizeSize64: 64,
-    lineHeightLineHeight8: 8,
-    lineHeightLineHeight10: 10,
-    lineHeightLineHeight12: 12,
-    lineHeightLineHeight13: 13,
-    lineHeightLineHeight14: 14,
-    lineHeightLineHeight15: 15,
-    lineHeightLineHeight16: 16,
-    lineHeightLineHeight17: 17,
-    lineHeightLineHeight18: 18,
-    lineHeightLineHeight20: 20,
-    lineHeightLineHeight24: 24,
-    lineHeightLineHeight28: 28,
-    lineHeightLineHeight32: 32,
-    lineHeightLineHeight40: 40,
-    lineHeightLineHeight48: 48,
-  },
-};
-
-export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  darkElevation1: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.1)',
-    shadowOffset: {
-      width: 0,
-      height: 2.6666666666666665,
-    },
-    shadowOpacity: 0.3879999999999999,
-    shadowRadius: 6.4,
-  },
-  darkElevation2: {
-    elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.12)',
-    shadowOffset: {
-      width: 0,
-      height: 4.5016949152542365,
-    },
-    shadowOpacity: 0.41655999999999993,
-    shadowRadius: 13.364067796610168,
-  },
-  darkElevation3: {
-    elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.14)',
-    shadowOffset: {
-      width: 0,
-      height: 8.839779005524864,
-    },
-    shadowOpacity: 0.44443999999999995,
-    shadowRadius: 20.207734806629837,
-  },
-  darkElevation4: {
-    elevation: 13,
-    shadowColor: 'rgba(0,0,0,0.16)',
-    shadowOffset: {
-      width: 0,
-      height: 14.201622247972189,
-    },
-    shadowOpacity: 0.48592,
-    shadowRadius: 26.994206257242176,
-  },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
-  lightElevation1: {
-    elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.06)',
-    shadowOffset: {
-      width: 0,
-      height: 2.904109589041096,
-    },
-    shadowOpacity: 0.19630000000000003,
-    shadowRadius: 6.684931506849315,
-  },
-  lightElevation2: {
-    elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.06)',
-    shadowOffset: {
-      width: 0,
-      height: 4.510067114093959,
-    },
-    shadowOpacity: 0.21416000000000013,
-    shadowRadius: 13.358389261744968,
-  },
-  lightElevation3: {
-    elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.1)',
-    shadowOffset: {
-      width: 0,
-      height: 9.322128851540615,
-    },
-    shadowOpacity: 0.26470000000000005,
-    shadowRadius: 20.786554621848737,
-  },
-  lightElevation4: {
-    elevation: 14,
-    shadowColor: 'rgba(0,0,0,0.12)',
-    shadowOffset: {
-      width: 0,
-      height: 15.201376936316695,
-    },
-    shadowOpacity: 0.29776,
-    shadowRadius: 27.86919104991394,
-  },
-  radius2xl: foundations.radius.radius20,
-  radius3xl: foundations.radius.radius24,
-  radius4xl: foundations.radius.radius32,
-  radiusLg: foundations.radius.radius12,
-  radiusMax: foundations.radius.radiusFull,
-  radiusMd: foundations.radius.radius8,
-  radiusNone: foundations.radius.radius0,
-  radiusSm: foundations.radius.radius6,
-  radiusXl: foundations.radius.radius16,
-  radiusXs: foundations.radius.radius4,
-  radiusXxs: foundations.radius.radius2,
-  spacing2xl: foundations.spacing.space32,
-  spacing3xl: foundations.spacing.space40,
-  spacingLg: foundations.spacing.space20,
-  spacingMd: foundations.spacing.space16,
-  spacingNone: foundations.spacing.space0,
-  spacingSm: foundations.spacing.space12,
-  spacingXl: foundations.spacing.space24,
-  spacingXs: foundations.spacing.space8,
-  spacingXxs: foundations.spacing.space4,
-  spacingXxxs: foundations.spacing.space2,
-  typographyFontFamilyMono: foundations.typography.fontFamilyGeistMono,
-  typographyFontFamilySans: foundations.typography.fontFamilyGeist,
-  typographyFontSize2xl: foundations.typography.fontSizeSize24,
-  typographyFontSizeLg: foundations.typography.fontSizeSize18,
-  typographyFontSizeMd: foundations.typography.fontSizeSize16,
-  typographyFontSizeMicro: foundations.typography.fontSizeSize8,
-  typographyFontSizeSm: foundations.typography.fontSizeSize14,
-  typographyFontSizeXl: foundations.typography.fontSizeSize20,
-  typographyFontSizeXs: foundations.typography.fontSizeSize12,
-  typographyFontSizeXxs: foundations.typography.fontSizeSize10,
-  typographyFontWeightBold: 700,
-  typographyFontWeightMedium: 500,
-  typographyFontWeightRegular: 400,
-  typographyFontWeightSemiBold: 600,
-  typographyLineHeightNormal: foundations.typography.lineHeightLineHeight20,
-  typographyLineHeightRelaxed: foundations.typography.lineHeightLineHeight24,
-  typographyLineHeightTight: foundations.typography.lineHeightLineHeight16,
-} as const;
-
-export const components: IStreamTokens['components'] = {
-  buttonHitTargetMinHeight: foundations.layout.size48,
-  buttonHitTargetMinWidth: foundations.layout.size48,
-  buttonPaddingXIconOnlyLg: 14,
-  buttonPaddingXIconOnlyMd: 10,
-  buttonPaddingXIconOnlySm: 6,
-  buttonPaddingXIconOnlyXs: 4,
-  buttonPaddingXWithLabelLg: 16,
-  buttonPaddingXWithLabelMd: 16,
-  buttonPaddingXWithLabelSm: 16,
-  buttonPaddingXWithLabelXs: 12,
-  buttonPaddingYLg: 14,
-  buttonPaddingYMd: 10,
-  buttonPaddingYSm: 6,
-  buttonPaddingYXs: 4,
-  buttonRadiusFull: foundations.radius.radiusFull,
-  buttonRadiusLg: foundations.radius.radiusFull,
-  buttonRadiusMd: foundations.radius.radiusFull,
-  buttonRadiusSm: foundations.radius.radiusFull,
-  buttonVisualHeightLg: foundations.layout.size48,
-  buttonVisualHeightMd: foundations.layout.size40,
-  buttonVisualHeightSm: foundations.layout.size32,
-  buttonVisualHeightXs: foundations.layout.size24,
-  composerRadiusFixed: primitives.radius3xl,
-  composerRadiusFloating: primitives.radius3xl,
-  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,
-  iconSizeXs: foundations.layout.size12,
-  iconStrokeDefault: foundations.stroke.w150,
-  iconStrokeEmphasis: foundations.stroke.w200,
-  iconStrokeSubtle: foundations.stroke.w120,
-  messageBubbleRadiusAttachment: primitives.radiusLg,
-  messageBubbleRadiusAttachmentInline: primitives.radiusMd,
-  messageBubbleRadiusGroupBottom: primitives.radius2xl,
-  messageBubbleRadiusGroupMiddle: primitives.radius2xl,
-  messageBubbleRadiusGroupTop: primitives.radius2xl,
-  messageBubbleRadiusTail: primitives.radiusNone,
-} as const;
-
-export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
-  accentError: foundations.colors.baseBlack,
-  accentNeutral: foundations.colors.baseBlack,
-  accentPrimary: foundations.colors.baseBlack,
-  accentSuccess: foundations.colors.baseBlack,
-  accentWarning: foundations.colors.baseBlack,
-  avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: '$accentBlack',
-  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',
-  backgroundCoreDisabled: '$backgroundElevationElevation0',
-  backgroundCoreHighlight: foundations.colors.slate100,
-  backgroundCoreHover: 'rgba(0, 0, 0, 0.1)',
-  backgroundCoreInverse: '$accentBlack',
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
-  backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(0, 0, 0, 0.2)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
-  badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
-  badgeBgNeutral: '$accentNeutral',
-  badgeBgOverlay: '$backgroundCoreInverse',
-  badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
-  badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
-  badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: '$accentBlack',
-  borderCoreOnAccent: '$accentBlack',
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: '$accentBlack',
-  borderCoreOpacity10: '$accentBlack',
-  borderCoreOpacity25: '$accentBlack',
-  borderCoreStrong: '$accentBlack',
-  borderCoreSubtle: '$accentBlack',
-  borderUtilityDisabled: foundations.colors.slate300,
-  borderUtilityError: '$accentError',
-  borderUtilityFocus: '$accentBlack',
-  borderUtilitySelected: '$accentPrimary',
-  borderUtilitySuccess: '$accentSuccess',
-  borderUtilityWarning: '$accentWarning',
-  brand50: foundations.colors.baseBlack,
-  brand100: foundations.colors.baseBlack,
-  brand150: foundations.colors.baseBlack,
-  brand200: foundations.colors.baseBlack,
-  brand300: foundations.colors.baseBlack,
-  brand400: foundations.colors.baseBlack,
-  brand500: foundations.colors.baseBlack,
-  brand600: foundations.colors.baseBlack,
-  brand700: foundations.colors.baseBlack,
-  brand800: foundations.colors.baseBlack,
-  brand900: foundations.colors.baseBlack,
-  buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
-  buttonDestructiveText: '$accentError',
-  buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
-  buttonPrimaryBg: '$accentPrimary',
-  buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
-  buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textOnDark',
-  buttonPrimaryText: '$accentPrimary',
-  buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
-  buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
-  buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
-  buttonSecondaryText: '$textPrimary',
-  buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
-  chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
-  chatBgAttachmentOutgoing: '$backgroundElevationElevation0',
-  chatBgIncoming: '$backgroundCoreSurface',
-  chatBgOutgoing: '$backgroundElevationElevation0',
-  chatBgTypingIndicator: '$accentNeutral',
-  chatBorderIncoming: '$borderCoreSubtle',
-  chatBorderOnChatIncoming: '$borderCoreStrong',
-  chatBorderOnChatOutgoing: '$accentBlack',
-  chatBorderOutgoing: '$accentBlack',
-  chatPollProgressFillIncoming: '$controlProgressBarFill',
-  chatPollProgressFillOutgoing: '$controlProgressBarFill',
-  chatPollProgressTrackIncoming: '$controlProgressBarTrack',
-  chatPollProgressTrackOutgoing: '$controlProgressBarTrack',
-  chatReplyIndicatorIncoming: foundations.colors.baseBlack,
-  chatReplyIndicatorOutgoing: foundations.colors.baseBlack,
-  chatTextIncoming: '$textPrimary',
-  chatTextLink: '$textLink',
-  chatTextMention: '$textLink',
-  chatTextOutgoing: '$brand900',
-  chatTextReaction: '$textSecondary',
-  chatTextRead: '$accentPrimary',
-  chatTextSystem: '$textSecondary',
-  chatTextTimestamp: '$textTertiary',
-  chatTextUsername: '$textSecondary',
-  chatThreadConnectorIncoming: '$borderCoreDefault',
-  chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
-  chatWaveformBarPlaying: '$accentBlack',
-  chipBg: '$accentBlack',
-  chipText: '$textOnDark',
-  composerBg: '$backgroundElevationElevation1',
-  controlPlaybackToggleBorder: '$borderCoreDefault',
-  controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
-  controlProgressBarFill: '$accentNeutral',
-  controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
-  controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
-  controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilityFocus',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurface',
-  inputSendIcon: '$accentPrimary',
-  inputSendIconDisabled: '$textDisabled',
-  inputTextDefault: '$textPrimary',
-  inputTextDisabled: '$textDisabled',
-  inputTextIcon: '$textTertiary',
-  inputTextPlaceholder: '$textTertiary',
-  presenceBgOffline: '$accentNeutral',
-  presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
-  reactionBorder: '$borderCoreDefault',
-  reactionEmoji: '$textPrimary',
-  reactionText: '$textPrimary',
-  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: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.baseBlack,
-  textSecondary: foundations.colors.neutral800,
-  textTertiary: foundations.colors.neutral700,
-} as const;
diff --git a/package/src/theme/generated/light/StreamTokens.android.ts b/package/src/theme/generated/light/StreamTokens.android.ts
index 7b0558b578..8e552a8b2d 100644
--- a/package/src/theme/generated/light/StreamTokens.android.ts
+++ b/package/src/theme/generated/light/StreamTokens.android.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.28)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.5136000000000001,
     shadowRadius: 16.892307692307693,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 1,
     shadowColor: 'rgba(0,0,0,0.2)',
@@ -330,17 +315,17 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.40959999999999996,
     shadowRadius: 16.919999999999998,
   },
-  radius2xl: foundations.radius.radius16,
-  radius3xl: foundations.radius.radius20,
-  radius4xl: foundations.radius.radius24,
-  radiusLg: foundations.radius.radius8,
+  radius2xl: foundations.radius.radius20,
+  radius3xl: foundations.radius.radius24,
+  radius4xl: foundations.radius.radius32,
+  radiusLg: foundations.radius.radius12,
   radiusMax: foundations.radius.radiusFull,
-  radiusMd: foundations.radius.radius6,
+  radiusMd: foundations.radius.radius8,
   radiusNone: foundations.radius.radius0,
-  radiusSm: foundations.radius.radius4,
-  radiusXl: foundations.radius.radius12,
-  radiusXs: foundations.radius.radius2,
-  radiusXxs: foundations.radius.radius0,
+  radiusSm: foundations.radius.radius6,
+  radiusXl: foundations.radius.radius16,
+  radiusXs: foundations.radius.radius4,
+  radiusXxs: foundations.radius.radius2,
   spacing2xl: foundations.spacing.space32,
   spacing3xl: foundations.spacing.space40,
   spacingLg: foundations.spacing.space20,
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red500,
-  accentNeutral: foundations.colors.slate500,
+  accentNeutral: '$chrome500',
   accentPrimary: '$brand500',
   accentSuccess: foundations.colors.green400,
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.slate100,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue150,
   avatarPaletteBg2: foundations.colors.cyan150,
   avatarPaletteBg3: foundations.colors.green150,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green900,
   avatarPaletteText4: foundations.colors.purple900,
   avatarPaletteText5: foundations.colors.yellow900,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.slate500,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.slate100,
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome0',
+  backgroundCoreElevation2: '$chrome0',
+  backgroundCoreElevation3: '$chrome0',
+  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreHover: 'rgba(30, 37, 43, 0.05)',
-  backgroundCoreInverse: foundations.colors.slate900,
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.25)',
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
+  backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(30, 37, 43, 0.1)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome50',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  backgroundUtilityPressed: 'rgba(26, 27, 37, 0.15)',
+  backgroundUtilitySelected: 'rgba(26, 27, 37, 0.2)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.slate150,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: foundations.colors.slate200,
-  borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)',
-  borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)',
-  borderCoreStrong: foundations.colors.slate300,
-  borderCoreSubtle: foundations.colors.slate100,
-  borderUtilityDisabled: foundations.colors.slate100,
+  borderCoreDefault: '$chrome150',
+  borderCoreInverse: '$chrome0',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  borderUtilityPressed: 'rgba(26, 27, 37, 0.2)',
+  borderUtilitySelected: 'rgba(26, 27, 37, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue50,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue800,
   brand900: foundations.colors.blue900,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$borderCoreOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$borderCoreInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand100',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseWhite,
+  chrome50: foundations.colors.slate50,
+  chrome100: foundations.colors.slate100,
+  chrome150: foundations.colors.slate150,
+  chrome200: foundations.colors.slate200,
+  chrome300: foundations.colors.slate300,
+  chrome400: foundations.colors.slate400,
+  chrome500: foundations.colors.slate500,
+  chrome600: foundations.colors.slate600,
+  chrome700: foundations.colors.slate700,
+  chrome800: foundations.colors.slate800,
+  chrome900: foundations.colors.slate900,
+  chrome1000: foundations.colors.baseBlack,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurfaceSubtle',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,8 +582,8 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
@@ -587,12 +593,11 @@ export const semantics: IStreamTokens['semantics'] = {
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
   systemText: foundations.colors.baseBlack,
-  textDisabled: foundations.colors.slate300,
-  textInverse: foundations.colors.baseWhite,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.slate900,
-  textSecondary: foundations.colors.slate700,
-  textTertiary: foundations.colors.slate500,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand500',
+  textOnAccent: '$chrome0',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;
diff --git a/package/src/theme/generated/light/StreamTokens.ios.ts b/package/src/theme/generated/light/StreamTokens.ios.ts
index e4873abe25..ffdacd38fc 100644
--- a/package/src/theme/generated/light/StreamTokens.ios.ts
+++ b/package/src/theme/generated/light/StreamTokens.ios.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.20)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.28,
     shadowRadius: 24.000000000000004,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 2,
     shadowColor: 'rgba(0,0,0,0.12)',
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red500,
-  accentNeutral: foundations.colors.slate500,
+  accentNeutral: '$chrome500',
   accentPrimary: '$brand500',
   accentSuccess: foundations.colors.green400,
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.slate100,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue150,
   avatarPaletteBg2: foundations.colors.cyan150,
   avatarPaletteBg3: foundations.colors.green150,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green900,
   avatarPaletteText4: foundations.colors.purple900,
   avatarPaletteText5: foundations.colors.yellow900,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.slate500,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.slate100,
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome0',
+  backgroundCoreElevation2: '$chrome0',
+  backgroundCoreElevation3: '$chrome0',
+  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreHover: 'rgba(30, 37, 43, 0.05)',
-  backgroundCoreInverse: foundations.colors.slate900,
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.25)',
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
+  backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(30, 37, 43, 0.1)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome50',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  backgroundUtilityPressed: 'rgba(26, 27, 37, 0.15)',
+  backgroundUtilitySelected: 'rgba(26, 27, 37, 0.2)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.slate150,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: foundations.colors.slate200,
-  borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)',
-  borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)',
-  borderCoreStrong: foundations.colors.slate300,
-  borderCoreSubtle: foundations.colors.slate100,
-  borderUtilityDisabled: foundations.colors.slate100,
+  borderCoreDefault: '$chrome150',
+  borderCoreInverse: '$chrome0',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  borderUtilityPressed: 'rgba(26, 27, 37, 0.2)',
+  borderUtilitySelected: 'rgba(26, 27, 37, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue50,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue800,
   brand900: foundations.colors.blue900,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$borderCoreOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$borderCoreInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand100',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseWhite,
+  chrome50: foundations.colors.slate50,
+  chrome100: foundations.colors.slate100,
+  chrome150: foundations.colors.slate150,
+  chrome200: foundations.colors.slate200,
+  chrome300: foundations.colors.slate300,
+  chrome400: foundations.colors.slate400,
+  chrome500: foundations.colors.slate500,
+  chrome600: foundations.colors.slate600,
+  chrome700: foundations.colors.slate700,
+  chrome800: foundations.colors.slate800,
+  chrome900: foundations.colors.slate900,
+  chrome1000: foundations.colors.baseBlack,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurfaceSubtle',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,8 +582,8 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
@@ -587,12 +593,11 @@ export const semantics: IStreamTokens['semantics'] = {
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
   systemText: foundations.colors.baseBlack,
-  textDisabled: foundations.colors.slate300,
-  textInverse: foundations.colors.baseWhite,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.slate900,
-  textSecondary: foundations.colors.slate700,
-  textTertiary: foundations.colors.slate500,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand500',
+  textOnAccent: '$chrome0',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;
diff --git a/package/src/theme/generated/light/StreamTokens.web.ts b/package/src/theme/generated/light/StreamTokens.web.ts
index 77bcdf92dd..4442b17dd3 100644
--- a/package/src/theme/generated/light/StreamTokens.web.ts
+++ b/package/src/theme/generated/light/StreamTokens.web.ts
@@ -5,11 +5,12 @@ import type { IStreamTokens } from '../StreamTokens.types';
 export const foundations: IStreamTokens['foundations'] = {
   colors: {
     baseTransparent0: 'rgba(255, 255, 255, 0)',
-    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
-    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
-    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
     baseTransparentWhite10: 'rgba(255, 255, 255, 0.1)',
     baseTransparentWhite20: 'rgba(255, 255, 255, 0.2)',
+    baseTransparentWhite30: 'rgba(255, 255, 255, 0.3)',
+    baseTransparentWhite70: 'rgba(255, 255, 255, 0.7)',
+    baseTransparentBlack5: 'rgba(0, 0, 0, 0.05)',
+    baseTransparentBlack10: 'rgba(0, 0, 0, 0.1)',
     baseTransparentBlack70: 'rgba(0, 0, 0, 0.7)',
     baseBlack: '#000000',
     baseWhite: '#ffffff',
@@ -145,6 +146,10 @@ export const foundations: IStreamTokens['foundations'] = {
     size480: 480,
     size560: 560,
     size640: 640,
+    size760: 760,
+    size144: 144,
+    size208: 208,
+    size56: 56,
   },
   radius: {
     radius0: 0,
@@ -230,16 +235,6 @@ export const foundations: IStreamTokens['foundations'] = {
 };
 
 export const primitives: IStreamTokens['primitives'] = {
-  darkElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   darkElevation1: {
     elevation: 3,
     shadowColor: 'rgba(0,0,0,0.1)',
@@ -280,16 +275,6 @@ export const primitives: IStreamTokens['primitives'] = {
     shadowOpacity: 0.48592,
     shadowRadius: 26.994206257242176,
   },
-  lightElevation0: {
-    elevation: 0,
-    shadowColor: 'rgba(0,0,0,0)',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-  },
   lightElevation1: {
     elevation: 3,
     shadowColor: 'rgba(0,0,0,0.06)',
@@ -419,14 +404,13 @@ export const components: IStreamTokens['components'] = {
 } as const;
 
 export const semantics: IStreamTokens['semantics'] = {
-  accentBlack: foundations.colors.baseBlack,
   accentError: foundations.colors.red500,
-  accentNeutral: foundations.colors.slate500,
+  accentNeutral: '$chrome500',
   accentPrimary: '$brand500',
   accentSuccess: foundations.colors.green400,
   accentWarning: foundations.colors.yellow400,
   avatarBgDefault: '$avatarPaletteBg1',
-  avatarBgPlaceholder: foundations.colors.slate100,
+  avatarBgPlaceholder: '$chrome150',
   avatarPaletteBg1: foundations.colors.blue150,
   avatarPaletteBg2: foundations.colors.cyan150,
   avatarPaletteBg3: foundations.colors.green150,
@@ -437,50 +421,55 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText3: foundations.colors.green900,
   avatarPaletteText4: foundations.colors.purple900,
   avatarPaletteText5: foundations.colors.yellow900,
+  avatarPresenceBgOffline: '$accentNeutral',
+  avatarPresenceBgOnline: '$accentSuccess',
+  avatarPresenceBorder: '$borderCoreInverse',
   avatarTextDefault: '$avatarPaletteText1',
-  avatarTextPlaceholder: foundations.colors.slate500,
-  backgroundCoreApp: '$backgroundElevationElevation0',
-  backgroundCoreDisabled: foundations.colors.slate100,
+  avatarTextPlaceholder: '$chrome500',
+  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreElevation0: '$chrome0',
+  backgroundCoreElevation1: '$chrome0',
+  backgroundCoreElevation2: '$chrome0',
+  backgroundCoreElevation3: '$chrome0',
+  backgroundCoreElevation4: '$chrome0',
   backgroundCoreHighlight: foundations.colors.yellow50,
-  backgroundCoreHover: 'rgba(30, 37, 43, 0.05)',
-  backgroundCoreInverse: foundations.colors.slate900,
-  backgroundCoreOverlay: 'rgba(255, 255, 255, 0.75)',
-  backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.25)',
+  backgroundCoreInverse: '$chrome900',
+  backgroundCoreOnAccent: '$chrome0',
+  backgroundCoreOverlayDark: 'rgba(26, 27, 37, 0.25)',
   backgroundCoreOverlayLight: 'rgba(255, 255, 255, 0.75)',
-  backgroundCorePressed: 'rgba(30, 37, 43, 0.1)',
-  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,
-  backgroundElevationElevation1: foundations.colors.baseWhite,
-  backgroundElevationElevation2: foundations.colors.baseWhite,
-  backgroundElevationElevation3: foundations.colors.baseWhite,
-  backgroundElevationElevation4: foundations.colors.baseWhite,
-  badgeBgDefault: '$backgroundElevationElevation2',
+  backgroundCoreScrim: 'rgba(26, 27, 37, 0.5)',
+  backgroundCoreSurface: '$chrome100',
+  backgroundCoreSurfaceCard: '$chrome50',
+  backgroundCoreSurfaceStrong: '$chrome150',
+  backgroundCoreSurfaceSubtle: '$chrome50',
+  backgroundUtilityDisabled: '$chrome100',
+  backgroundUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  backgroundUtilityPressed: 'rgba(26, 27, 37, 0.15)',
+  backgroundUtilitySelected: 'rgba(26, 27, 37, 0.2)',
+  badgeBgDefault: '$backgroundCoreElevation3',
   badgeBgError: '$accentError',
-  badgeBgInverse: '$backgroundCoreInverse',
+  badgeBgInverse: '$chrome1000',
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreOnDark',
+  badgeBorder: '$borderCoreInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textOnDark',
+  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
-  borderCoreDefault: foundations.colors.slate150,
-  borderCoreOnAccent: foundations.colors.baseWhite,
-  borderCoreOnDark: foundations.colors.baseWhite,
-  borderCoreOnSurface: foundations.colors.slate200,
-  borderCoreOpacity10: 'rgba(0, 0, 0, 0.1)',
-  borderCoreOpacity25: 'rgba(0, 0, 0, 0.25)',
-  borderCoreStrong: foundations.colors.slate300,
-  borderCoreSubtle: foundations.colors.slate100,
-  borderUtilityDisabled: foundations.colors.slate100,
+  borderCoreDefault: '$chrome150',
+  borderCoreInverse: '$chrome0',
+  borderCoreOnAccent: '$chrome0',
+  borderCoreOpacityStrong: 'rgba(26, 27, 37, 0.25)',
+  borderCoreOpacitySubtle: 'rgba(26, 27, 37, 0.1)',
+  borderCoreStrong: '$chrome300',
+  borderCoreSubtle: '$chrome100',
+  borderUtilityActive: '$accentPrimary',
+  borderUtilityDisabled: '$chrome100',
   borderUtilityError: '$accentError',
-  borderUtilityFocus: '$brand150',
-  borderUtilitySelected: '$accentPrimary',
+  borderUtilityFocused: '$brand150',
+  borderUtilityHover: 'rgba(26, 27, 37, 0.1)',
+  borderUtilityPressed: 'rgba(26, 27, 37, 0.2)',
+  borderUtilitySelected: 'rgba(26, 27, 37, 0.15)',
   borderUtilitySuccess: '$accentSuccess',
   borderUtilityWarning: '$accentWarning',
   brand50: foundations.colors.blue50,
@@ -495,31 +484,30 @@ export const semantics: IStreamTokens['semantics'] = {
   brand800: foundations.colors.blue800,
   brand900: foundations.colors.blue900,
   buttonDestructiveBg: '$accentError',
-  buttonDestructiveBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textOnDark',
+  buttonDestructiveBorderOnDark: '$textInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textOnDark',
+  buttonDestructiveTextOnDark: '$textInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$borderCoreOnDark',
-  buttonPrimaryText: '$accentPrimary',
+  buttonPrimaryBorderOnDark: '$borderCoreInverse',
+  buttonPrimaryText: '$textLink',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textOnDark',
+  buttonPrimaryTextOnDark: '$textInverse',
   buttonSecondaryBg: '$backgroundCoreSurface',
-  buttonSecondaryBgLiquidGlass: '$backgroundElevationElevation0',
+  buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreOnDark',
+  buttonSecondaryBorderOnDark: '$borderCoreInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textOnDark',
+  buttonSecondaryTextOnDark: '$textInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
   chatBgIncoming: '$backgroundCoreSurface',
   chatBgOutgoing: '$brand100',
-  chatBgTypingIndicator: '$accentNeutral',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
@@ -538,36 +526,54 @@ export const semantics: IStreamTokens['semantics'] = {
   chatTextRead: '$accentPrimary',
   chatTextSystem: '$textSecondary',
   chatTextTimestamp: '$textTertiary',
+  chatTextTypingIndicator: '$chatTextIncoming',
   chatTextUsername: '$textSecondary',
   chatThreadConnectorIncoming: '$borderCoreDefault',
   chatThreadConnectorOutgoing: '$brand150',
-  chatWaveformBar: '$borderCoreOpacity25',
+  chatWaveformBar: '$borderCoreOpacityStrong',
   chatWaveformBarPlaying: '$accentPrimary',
-  chipBg: '$brand100',
-  chipText: '$brand900',
-  composerBg: '$backgroundElevationElevation1',
+  chrome0: foundations.colors.baseWhite,
+  chrome50: foundations.colors.slate50,
+  chrome100: foundations.colors.slate100,
+  chrome150: foundations.colors.slate150,
+  chrome200: foundations.colors.slate200,
+  chrome300: foundations.colors.slate300,
+  chrome400: foundations.colors.slate400,
+  chrome500: foundations.colors.slate500,
+  chrome600: foundations.colors.slate600,
+  chrome700: foundations.colors.slate700,
+  chrome800: foundations.colors.slate800,
+  chrome900: foundations.colors.slate900,
+  chrome1000: foundations.colors.baseBlack,
+  controlCheckboxBg: foundations.colors.baseTransparent0,
+  controlCheckboxBgSelected: '$accentPrimary',
+  controlCheckboxBorder: '$borderCoreDefault',
+  controlCheckboxIcon: '$textOnAccent',
+  controlPlaybackThumbBgActive: '$accentPrimary',
+  controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
+  controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
+  controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayControlBg: '$accentBlack',
-  controlPlayControlIcon: '$textOnAccent',
+  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
-  controlRadiocheckBg: foundations.colors.baseTransparent0,
-  controlRadiocheckBgSelected: '$accentPrimary',
-  controlRadiocheckBorder: '$borderCoreDefault',
-  controlRadiocheckIconSelected: '$textOnDark',
+  controlRadioButtonBg: foundations.colors.baseTransparent0,
+  controlRadioButtonBgSelected: '$accentPrimary',
+  controlRadioButtonBorder: '$borderCoreDefault',
+  controlRadioButtonIndicator: '$textOnAccent',
+  controlRadioCheckBg: foundations.colors.baseTransparent0,
+  controlRadioCheckBgSelected: '$accentPrimary',
+  controlRadioCheckBorder: '$borderCoreDefault',
+  controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreOnDark',
-  controlRemoveControlIcon: '$textOnDark',
-  controlToggleSwitchBg: '$backgroundCoreSurfaceStrong',
-  controlToggleSwitchBgDisabled: '$backgroundCoreDisabled',
+  controlRemoveControlBorder: '$borderCoreInverse',
+  controlRemoveControlIcon: '$textInverse',
+  controlToggleSwitchBg: '$accentNeutral',
+  controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundElevationElevation4',
-  inputBorderDefault: '$borderCoreDefault',
-  inputBorderFocus: '$borderUtilitySelected',
-  inputBorderHover: '$borderCoreStrong',
-  inputBorderSelected: '$borderUtilitySelected',
-  inputOptionCardBg: '$backgroundCoreSurfaceSubtle',
+  controlToggleSwitchKnob: '$backgroundCoreElevation4',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -576,8 +582,8 @@ export const semantics: IStreamTokens['semantics'] = {
   inputTextPlaceholder: '$textTertiary',
   presenceBgOffline: '$accentNeutral',
   presenceBgOnline: '$accentSuccess',
-  presenceBorder: '$borderCoreOnDark',
-  reactionBg: '$backgroundElevationElevation3',
+  presenceBorder: '$borderCoreInverse',
+  reactionBg: '$backgroundCoreElevation3',
   reactionBorder: '$borderCoreDefault',
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
@@ -587,12 +593,11 @@ export const semantics: IStreamTokens['semantics'] = {
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(0, 0, 0, 0.5)',
   systemText: foundations.colors.baseBlack,
-  textDisabled: foundations.colors.slate300,
-  textInverse: foundations.colors.baseWhite,
-  textLink: '$accentPrimary',
-  textOnAccent: foundations.colors.baseWhite,
-  textOnDark: foundations.colors.baseWhite,
-  textPrimary: foundations.colors.slate900,
-  textSecondary: foundations.colors.slate700,
-  textTertiary: foundations.colors.slate500,
+  textDisabled: '$chrome300',
+  textInverse: '$chrome0',
+  textLink: '$brand500',
+  textOnAccent: '$chrome0',
+  textPrimary: '$chrome900',
+  textSecondary: '$chrome700',
+  textTertiary: '$chrome500',
 } as const;