stream-chat-react-native-core 9.0.0-beta.15 → 9.0.0-beta.17

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -125,7 +125,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const MessageUserReactionsItem = propMessageUserReactionsItem ?? contextMessageUserReactionsItem;
 
   const onSelectReaction = useStableCallback((reactionType: string) => {
-    setSelectedReaction(reactionType);
+    setSelectedReaction((currentReaction) =>
+      currentReaction === reactionType ? undefined : reactionType,
+    );
   });
 
   useEffect(() => {

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -100,14 +100,21 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
-  it('changes selected reaction when a reaction button is pressed', () => {
+  it('toggles the selected reaction when a reaction button is pressed twice', () => {
     const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    let reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
 
     fireEvent.press(reactionButtons[1]);
 
     expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
     expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+
+    fireEvent.press(reactionButtons[1]);
+
+    reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+
+    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
+    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
   });
 
   it('renders reactions list', () => {

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1883,6 +1883,7 @@ exports[`Thread should match thread snapshot 1`] = `
                           align="xMidYMid"
                           bbHeight={20}
                           bbWidth={20}
+                          fill="none"
                           focusable={false}
                           height={20}
                           meetOrSlice={0}
@@ -1908,14 +1909,10 @@ exports[`Thread should match thread snapshot 1`] = `
                           width={20}
                         >
                           <RNSVGGroup
-                            fill={
-                              {
-                                "payload": 4278190080,
-                                "type": 0,
-                              }
-                            }
+                            fill={null}
                             propList={
                               [
+                                "fill",
                                 "stroke",
                                 "strokeWidth",
                               ]
@@ -1940,6 +1937,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 [
                                   "stroke",
                                   "strokeWidth",
+                                  "strokeLinecap",
+                                  "strokeLinejoin",
                                 ]
                               }
                               stroke={
@@ -1948,6 +1947,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "type": 0,
                                 }
                               }
+                              strokeLinecap={1}
+                              strokeLinejoin={1}
                               strokeWidth={1.5}
                             />
                           </RNSVGGroup>
@@ -2787,7 +2788,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   }
                   strokeLinecap={1}
                   strokeLinejoin={1}
-                  strokeWidth={1.2}
+                  strokeWidth={1.5}
                 />
               </RNSVGGroup>
             </RNSVGSvgView>
@@ -2922,6 +2923,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     [
                       "stroke",
                       "strokeWidth",
+                      "strokeLinecap",
                       "strokeLinejoin",
                     ]
                   }
@@ -2931,6 +2933,7 @@ exports[`Thread should match thread snapshot 1`] = `
                       "type": 0,
                     }
                   }
+                  strokeLinecap={1}
                   strokeLinejoin={1}
                   strokeWidth={1.5}
                 />

package/src/components/ThreadList/ThreadListItemSkeleton.tsx

@@ -16,7 +16,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
   return (
     <View style={style}>
       <NativeShimmerView
-        baseColor={semantics.backgroundCoreSurface}
+        baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
         style={StyleSheet.absoluteFillObject}

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -63,7 +63,7 @@ export const ThreadListUnreadBanner = () => {
         {
           backgroundColor: pressed
             ? semantics.backgroundUtilityPressed
-            : semantics.backgroundCoreSurface,
+            : semantics.backgroundCoreSurfaceDefault,
         },
       ]}
     >
@@ -90,7 +90,7 @@ const useStyles = () => {
         ...threadListUnreadBanner.text,
       },
       container: {
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -242,8 +242,10 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
         KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidHide', keyboardDidHide),
       );
     } else {
-      listeners.push(Keyboard.addListener('keyboardDidShow', keyboardDidShowRN));
-      listeners.push(Keyboard.addListener('keyboardDidHide', keyboardDidHide));
+      if (Platform.OS === 'ios') {
+        listeners.push(Keyboard.addListener('keyboardWillShow', keyboardDidShowRN));
+        listeners.push(Keyboard.addListener('keyboardWillHide', keyboardDidHide));
+      }
     }
 
     return () => listeners.forEach((l) => l.remove());

package/src/components/ui/Badge/ImgurBadge.tsx

@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
       },
       text: {
-        color: semantics.badgeTextInverse,
+        color: semantics.badgeTextOnInverse,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/ui/GiphyChip.tsx

@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textInverse} height={16} width={16} />
+      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textInverse} height={16} width={16} />
+        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );
@@ -59,7 +59,7 @@ const useStyles = () => {
           height: 24,
         },
         text: {
-          color: semantics.textInverse,
+          color: semantics.textOnInverse,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,

package/src/icons/{chevron-down.tsx → chevron-up.tsx}

@@ -4,7 +4,7 @@ import { Path, Svg } from 'react-native-svg';
 
 import { IconProps } from './utils/base';
 
-export const ChevronTop = ({ height, width, ...rest }: IconProps) => (
+export const ChevronUp = ({ height, width, ...rest }: IconProps) => (
   <Svg fill={'none'} height={height} viewBox={'0 0 20 20'} width={width} {...rest}>
     <Path
       d='M16.25 12.5L10 6.25L3.75 12.5'

package/src/icons/command.tsx

@@ -8,6 +8,7 @@ export const CommandsIcon = ({ height, size, width, ...props }: IconProps) => (
   <Svg fill='none' height={height ?? size} width={width ?? size} viewBox={'0 0 20 20'} {...props}>
     <Path
       d='M6.25 7.5L9.375 10L6.25 12.5M10.625 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z'
+      strokeLinecap='round'
       strokeWidth={1.5}
       strokeLinejoin='round'
       {...props}

package/src/icons/file.tsx

@@ -21,7 +21,7 @@ export const File = ({ fill, height, pathFill, size, stroke, width, ...rest }: I
         stroke={color}
         strokeLinecap='round'
         strokeLinejoin='round'
-        strokeWidth={1.2}
+        strokeWidth={1.5}
       />
     </Svg>
   );

package/src/icons/index.ts

@@ -34,6 +34,7 @@ export * from './clock';
 export * from './Unknown';
 export * from './unpin';
 export * from './video-fill';
+export * from './video';
 export * from './user-add';
 export * from './user-remove';
 export * from './filetype-video-xl';

package/src/icons/link.tsx

@@ -8,8 +8,9 @@ export const Link = ({ height, size, width, ...rest }: IconProps) => (
   <Svg fill={'none'} height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} {...rest}>
     <Path
       d='M7.49989 12.4999L12.4999 7.49989M8.74989 5.94598L11.0983 3.60223C11.8035 2.90843 12.7543 2.52139 13.7436 2.52542C14.7328 2.52945 15.6804 2.92422 16.3799 3.62374C17.0795 4.32326 17.4742 5.27086 17.4783 6.26012C17.4823 7.24938 17.0953 8.20016 16.4015 8.90536L14.053 11.2499M5.94598 8.74989L3.60223 11.0983C2.90843 11.8035 2.52139 12.7543 2.52542 13.7436C2.52945 14.7328 2.92422 15.6804 3.62374 16.3799C4.32326 17.0795 5.27086 17.4742 6.26012 17.4783C7.24938 17.4823 8.20016 17.0953 8.90536 16.4015L11.2499 14.053'
+      strokeLinecap='round'
       strokeLinejoin='round'
-      strokeWidth={1.2}
+      strokeWidth={1.5}
       {...rest}
     />
   </Svg>

package/src/icons/pause-fill.tsx

@@ -16,7 +16,7 @@ export const Pause = ({ fill, height, pathFill, size, stroke, width, ...rest }:
       {...rest}
     >
       <Path
-        d='M13.75 4.375H11.875C11.5298 4.375 11.25 4.65482 11.25 5V15C11.25 15.3452 11.5298 15.625 11.875 15.625H13.75C14.0952 15.625 14.375 15.3452 14.375 15V5C14.375 4.65482 14.0952 4.375 13.75 4.375ZM8.125 4.375H6.25C5.90482 4.375 5.625 4.65482 5.625 5V15C5.625 15.3452 5.90482 15.625 6.25 15.625H8.125C8.47018 15.625 8.75 15.3452 8.75 15V5C8.75 4.65482 8.47018 4.375 8.125 4.375Z'
+        d='M16.875 3.75V16.25C16.875 16.5815 16.7433 16.8995 16.5089 17.1339C16.2745 17.3683 15.9565 17.5 15.625 17.5H12.5C12.1685 17.5 11.8505 17.3683 11.6161 17.1339C11.3817 16.8995 11.25 16.5815 11.25 16.25V3.75C11.25 3.41848 11.3817 3.10054 11.6161 2.86612C11.8505 2.6317 12.1685 2.5 12.5 2.5H15.625C15.9565 2.5 16.2745 2.6317 16.5089 2.86612C16.7433 3.10054 16.875 3.41848 16.875 3.75ZM7.5 2.5H4.375C4.04348 2.5 3.72554 2.6317 3.49112 2.86612C3.2567 3.10054 3.125 3.41848 3.125 3.75V16.25C3.125 16.5815 3.2567 16.8995 3.49112 17.1339C3.72554 17.3683 4.04348 17.5 4.375 17.5H7.5C7.83152 17.5 8.14946 17.3683 8.38388 17.1339C8.6183 16.8995 8.75 16.5815 8.75 16.25V3.75C8.75 3.41848 8.6183 3.10054 8.38388 2.86612C8.14946 2.6317 7.83152 2.5 7.5 2.5Z'
         fill={color}
       />
     </Svg>

package/src/icons/plus.tsx

@@ -5,7 +5,13 @@ import Svg, { Path } from 'react-native-svg';
 import { IconProps } from './utils/base';
 
 export const Plus = ({ height, size, width, ...rest }: IconProps) => (
-  <Svg height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} {...rest}>
-    <Path d='M3.125 10H16.875M10 3.125V16.875' {...rest} />
+  <Svg fill='none' height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} {...rest}>
+    <Path
+      d='M3.125 10H16.875M10 3.125V16.875'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      {...rest}
+    />
   </Svg>
 );

package/src/icons/stop-fill.tsx

@@ -16,7 +16,7 @@ export const Stop = ({ fill, height, pathFill, size, stroke, width, ...rest }: I
       {...rest}
     >
       <Path
-        d='M14.375 4.375H5.625C4.93464 4.375 4.375 4.93464 4.375 5.625V14.375C4.375 15.0654 4.93464 15.625 5.625 15.625H14.375C15.0654 15.625 15.625 15.0654 15.625 14.375V5.625C15.625 4.93464 15.0654 4.375 14.375 4.375Z'
+        d='M16.875 4.375V15.625C16.875 15.9565 16.7433 16.2745 16.5089 16.5089C16.2745 16.7433 15.9565 16.875 15.625 16.875H4.375C4.04348 16.875 3.72554 16.7433 3.49112 16.5089C3.2567 16.2745 3.125 15.9565 3.125 15.625V4.375C3.125 4.04348 3.2567 3.72554 3.49112 3.49112C3.72554 3.2567 4.04348 3.125 4.375 3.125H15.625C15.9565 3.125 16.2745 3.2567 16.5089 3.49112C16.7433 3.72554 16.875 4.04348 16.875 4.375Z'
         fill={color}
       />
     </Svg>

package/src/icons/thread.tsx

@@ -18,7 +18,7 @@ export const ThreadReply = ({
   return (
     <Svg viewBox='0 0 20 20' fill='none' height={height ?? size} width={width ?? size} {...rest}>
       <Path
-        d='M7.49978 8.75022H12.4998M7.49978 11.2502H12.4998M6.24431 16.4932C7.81972 17.405 9.67297 17.7127 11.4585 17.359C13.2441 17.0053 14.84 16.0143 15.9489 14.5708C17.0578 13.1273 17.6038 11.3298 17.4852 9.51341C17.3667 7.69704 16.5916 5.98577 15.3045 4.69866C14.0174 3.41156 12.3061 2.63646 10.4897 2.51789C8.67333 2.39932 6.87582 2.94537 5.43231 4.05422C3.9888 5.16308 2.99781 6.75906 2.64412 8.54461C2.29042 10.3302 2.59815 12.1834 3.50993 13.7588L2.53259 16.6768C2.49586 16.7869 2.49053 16.9051 2.5172 17.0181C2.54386 17.131 2.60146 17.2344 2.68355 17.3165C2.76563 17.3985 2.86895 17.4561 2.98194 17.4828C3.09492 17.5095 3.21309 17.5041 3.32321 17.4674L6.24431 16.4932Z'
+        d='M7.5 8.75H12.8125M7.5 11.25H12.8125M10.3125 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V9.6875C3.125 7.78126 3.88225 5.95309 5.23017 4.60517C6.57809 3.25725 8.40626 2.5 10.3125 2.5C11.2564 2.5 12.191 2.68591 13.063 3.04712C13.9351 3.40832 14.7274 3.93775 15.3948 4.60517C16.0623 5.27259 16.5917 6.06493 16.9529 6.93696C17.3141 7.80899 17.5 8.74362 17.5 9.6875C17.5 10.6314 17.3141 11.566 16.9529 12.438C16.5917 13.3101 16.0623 14.1024 15.3948 14.7698C14.7274 15.4373 13.9351 15.9667 13.063 16.3279C12.191 16.6891 11.2564 16.875 10.3125 16.875Z'
         stroke={color}
         strokeWidth={1.5}
         strokeLinecap='round'

package/src/icons/xmark.tsx

@@ -8,15 +8,9 @@ export const NewClose = ({ fill, height, pathFill, size, stroke, width, ...rest
   const color = stroke ?? pathFill ?? fill ?? 'black';
 
   return (
-    <Svg
-      height={height ?? size}
-      viewBox={'-2.5 -2.5 25 25'}
-      width={width ?? size}
-      fill='none'
-      {...rest}
-    >
+    <Svg height={height ?? size} viewBox={'0 0 20 20'} width={width ?? size} fill='none' {...rest}>
       <Path
-        d='M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375'
+        d='M13.5 6.5L6.5 13.5M13.5 13.5L6.5 6.5'
         stroke={color}
         strokeLinecap='round'
         strokeLinejoin='round'

package/src/theme/generated/StreamTokens.types.ts

@@ -366,15 +366,14 @@ export interface ChatSemantics {
   backgroundCoreElevation1: ColorValue;
   backgroundCoreElevation2: ColorValue;
   backgroundCoreElevation3: ColorValue;
-  backgroundCoreElevation4: ColorValue;
   backgroundCoreHighlight: ColorValue;
   backgroundCoreInverse: ColorValue;
   backgroundCoreOnAccent: ColorValue;
   backgroundCoreOverlayDark: ColorValue;
   backgroundCoreOverlayLight: ColorValue;
   backgroundCoreScrim: ColorValue;
-  backgroundCoreSurface: ColorValue;
   backgroundCoreSurfaceCard: ColorValue;
+  backgroundCoreSurfaceDefault: ColorValue;
   backgroundCoreSurfaceStrong: ColorValue;
   backgroundCoreSurfaceSubtle: ColorValue;
   backgroundUtilityDisabled: ColorValue;
@@ -389,17 +388,20 @@ export interface ChatSemantics {
   badgeBgPrimary: ColorValue;
   badgeBorder: ColorValue;
   badgeText: ColorValue;
-  badgeTextInverse: ColorValue;
   badgeTextOnAccent: ColorValue;
+  badgeTextOnInverse: ColorValue;
   borderCoreDefault: ColorValue;
   borderCoreInverse: ColorValue;
   borderCoreOnAccent: ColorValue;
+  borderCoreOnInverse: ColorValue;
+  borderCoreOnSurface: ColorValue;
   borderCoreOpacityStrong: ColorValue;
   borderCoreOpacitySubtle: ColorValue;
   borderCoreStrong: ColorValue;
   borderCoreSubtle: ColorValue;
   borderUtilityActive: ColorValue;
   borderUtilityDisabled: ColorValue;
+  borderUtilityDisabledOnSurface: ColorValue;
   borderUtilityError: ColorValue;
   borderUtilityFocused: ColorValue;
   borderUtilityHover: ColorValue;
@@ -484,6 +486,8 @@ export interface ChatSemantics {
   controlCheckboxBgSelected: ColorValue;
   controlCheckboxBorder: ColorValue;
   controlCheckboxIcon: ColorValue;
+  controlChipBorder: ColorValue;
+  controlChipText: ColorValue;
   controlPlaybackThumbBgActive: ColorValue;
   controlPlaybackThumbBgDefault: ColorValue;
   controlPlaybackThumbBorderActive: ColorValue;
@@ -529,9 +533,9 @@ export interface ChatSemantics {
   systemScrollbar: ColorValue;
   systemText: ColorValue;
   textDisabled: ColorValue;
-  textInverse: ColorValue;
   textLink: ColorValue;
   textOnAccent: ColorValue;
+  textOnInverse: ColorValue;
   textPrimary: ColorValue;
   textSecondary: ColorValue;
   textTertiary: ColorValue;

package/src/theme/generated/dark/StreamTokens.android.ts

@@ -423,23 +423,22 @@ export const semantics: IStreamTokens['semantics'] = {
   avatarPaletteText5: foundations.colors.yellow100,
   avatarPresenceBgOffline: '$accentNeutral',
   avatarPresenceBgOnline: '$accentSuccess',
-  avatarPresenceBorder: '$borderCoreInverse',
+  avatarPresenceBorder: '$borderCoreOnInverse',
   avatarTextDefault: '$avatarPaletteText1',
   avatarTextPlaceholder: '$chrome500',
-  backgroundCoreApp: '$backgroundCoreElevation0',
+  backgroundCoreApp: '$chrome0',
   backgroundCoreElevation0: '$chrome0',
   backgroundCoreElevation1: '$chrome50',
   backgroundCoreElevation2: '$chrome100',
   backgroundCoreElevation3: '$chrome200',
-  backgroundCoreElevation4: '$chrome300',
   backgroundCoreHighlight: foundations.colors.yellow800,
-  backgroundCoreInverse: '$chrome900',
-  backgroundCoreOnAccent: '$chrome0',
+  backgroundCoreInverse: '$chrome1000',
+  backgroundCoreOnAccent: '$chrome1000',
   backgroundCoreOverlayDark: 'rgba(0, 0, 0, 0.5)',
   backgroundCoreOverlayLight: 'rgba(0, 0, 0, 0.75)',
   backgroundCoreScrim: 'rgba(0, 0, 0, 0.75)',
-  backgroundCoreSurface: '$chrome100',
   backgroundCoreSurfaceCard: '$chrome100',
+  backgroundCoreSurfaceDefault: '$chrome100',
   backgroundCoreSurfaceStrong: '$chrome150',
   backgroundCoreSurfaceSubtle: '$chrome50',
   backgroundUtilityDisabled: '$chrome100',
@@ -452,19 +451,22 @@ export const semantics: IStreamTokens['semantics'] = {
   badgeBgNeutral: '$accentNeutral',
   badgeBgOverlay: 'rgba(0, 0, 0, 0.75)',
   badgeBgPrimary: '$accentPrimary',
-  badgeBorder: '$borderCoreInverse',
+  badgeBorder: '$borderCoreOnInverse',
   badgeText: '$textPrimary',
-  badgeTextInverse: '$textInverse',
   badgeTextOnAccent: '$textOnAccent',
+  badgeTextOnInverse: '$textOnInverse',
   borderCoreDefault: '$chrome200',
-  borderCoreInverse: '$chrome1000',
-  borderCoreOnAccent: '$chrome0',
+  borderCoreInverse: '$chrome0',
+  borderCoreOnAccent: '$chrome1000',
+  borderCoreOnInverse: '$chrome0',
+  borderCoreOnSurface: '$chrome300',
   borderCoreOpacityStrong: 'rgba(255, 255, 255, 0.25)',
   borderCoreOpacitySubtle: 'rgba(255, 255, 255, 0.2)',
   borderCoreStrong: '$chrome300',
   borderCoreSubtle: '$chrome100',
   borderUtilityActive: '$accentPrimary',
   borderUtilityDisabled: '$chrome100',
+  borderUtilityDisabledOnSurface: '$chrome150',
   borderUtilityError: '$accentError',
   borderUtilityFocused: '$brand150',
   borderUtilityHover: 'rgba(255, 255, 255, 0.1)',
@@ -486,38 +488,38 @@ export const semantics: IStreamTokens['semantics'] = {
   buttonDestructiveBg: '$accentError',
   buttonDestructiveBgLiquidGlass: '$backgroundCoreElevation0',
   buttonDestructiveBorder: '$accentError',
-  buttonDestructiveBorderOnDark: '$textInverse',
+  buttonDestructiveBorderOnDark: '$textOnInverse',
   buttonDestructiveText: '$accentError',
   buttonDestructiveTextOnAccent: '$textOnAccent',
-  buttonDestructiveTextOnDark: '$textInverse',
+  buttonDestructiveTextOnDark: '$textOnInverse',
   buttonPrimaryBg: '$accentPrimary',
   buttonPrimaryBgLiquidGlass: foundations.colors.baseTransparent0,
   buttonPrimaryBorder: '$brand200',
-  buttonPrimaryBorderOnDark: '$textInverse',
-  buttonPrimaryText: '$textLink',
+  buttonPrimaryBorderOnDark: '$borderCoreOnInverse',
+  buttonPrimaryText: '$accentPrimary',
   buttonPrimaryTextOnAccent: '$textOnAccent',
-  buttonPrimaryTextOnDark: '$textInverse',
-  buttonSecondaryBg: '$backgroundCoreSurface',
+  buttonPrimaryTextOnDark: '$textOnInverse',
+  buttonSecondaryBg: '$backgroundCoreSurfaceDefault',
   buttonSecondaryBgLiquidGlass: '$backgroundCoreElevation0',
   buttonSecondaryBorder: '$borderCoreDefault',
-  buttonSecondaryBorderOnDark: '$borderCoreInverse',
+  buttonSecondaryBorderOnDark: '$borderCoreOnInverse',
   buttonSecondaryText: '$textPrimary',
   buttonSecondaryTextOnAccent: '$textPrimary',
-  buttonSecondaryTextOnDark: '$textInverse',
+  buttonSecondaryTextOnDark: '$textOnInverse',
   chatBgAttachmentIncoming: '$backgroundCoreSurfaceStrong',
   chatBgAttachmentOutgoing: '$brand150',
-  chatBgIncoming: '$backgroundCoreSurface',
+  chatBgIncoming: '$backgroundCoreSurfaceDefault',
   chatBgOutgoing: '$brand100',
   chatBorderIncoming: '$borderCoreSubtle',
   chatBorderOnChatIncoming: '$borderCoreStrong',
   chatBorderOnChatOutgoing: '$brand300',
   chatBorderOutgoing: '$brand100',
   chatPollProgressFillIncoming: '$controlProgressBarFill',
-  chatPollProgressFillOutgoing: foundations.colors.baseWhite,
+  chatPollProgressFillOutgoing: '$accentPrimary',
   chatPollProgressTrackIncoming: '$controlProgressBarTrack',
   chatPollProgressTrackOutgoing: '$brand200',
-  chatReplyIndicatorIncoming: foundations.colors.neutral500,
-  chatReplyIndicatorOutgoing: '$brand700',
+  chatReplyIndicatorIncoming: '$chrome400',
+  chatReplyIndicatorOutgoing: '$brand400',
   chatTextIncoming: '$textPrimary',
   chatTextLink: '$textLink',
   chatTextMention: '$textLink',
@@ -549,13 +551,15 @@ export const semantics: IStreamTokens['semantics'] = {
   controlCheckboxBgSelected: '$accentPrimary',
   controlCheckboxBorder: '$borderCoreDefault',
   controlCheckboxIcon: '$textOnAccent',
+  controlChipBorder: '$borderCoreDefault',
+  controlChipText: '$textPrimary',
   controlPlaybackThumbBgActive: '$accentPrimary',
-  controlPlaybackThumbBgDefault: '$backgroundCoreInverse',
+  controlPlaybackThumbBgDefault: '$backgroundCoreOnAccent',
   controlPlaybackThumbBorderActive: '$borderCoreOnAccent',
   controlPlaybackThumbBorderDefault: '$borderCoreOpacityStrong',
   controlPlaybackToggleBorder: '$borderCoreDefault',
   controlPlaybackToggleText: '$textPrimary',
-  controlPlayButtonBg: '$chrome1000',
+  controlPlayButtonBg: 'rgba(0, 0, 0, 0.75)',
   controlPlayButtonIcon: '$textOnAccent',
   controlProgressBarFill: '$accentNeutral',
   controlProgressBarTrack: '$backgroundCoreSurfaceStrong',
@@ -568,12 +572,12 @@ export const semantics: IStreamTokens['semantics'] = {
   controlRadioCheckBorder: '$borderCoreDefault',
   controlRadioCheckIcon: '$textOnAccent',
   controlRemoveControlBg: '$backgroundCoreInverse',
-  controlRemoveControlBorder: '$borderCoreInverse',
-  controlRemoveControlIcon: '$textInverse',
+  controlRemoveControlBorder: '$borderCoreOnInverse',
+  controlRemoveControlIcon: '$textOnInverse',
   controlToggleSwitchBg: '$accentNeutral',
   controlToggleSwitchBgDisabled: '$backgroundUtilityDisabled',
   controlToggleSwitchBgSelected: '$accentPrimary',
-  controlToggleSwitchKnob: '$backgroundCoreElevation4',
+  controlToggleSwitchKnob: '$backgroundCoreOnAccent',
   inputSendIcon: '$accentPrimary',
   inputSendIconDisabled: '$textDisabled',
   inputTextDefault: '$textPrimary',
@@ -588,15 +592,15 @@ export const semantics: IStreamTokens['semantics'] = {
   reactionEmoji: '$textPrimary',
   reactionText: '$textPrimary',
   skeletonLoadingBase: foundations.colors.baseTransparent0,
-  skeletonLoadingHighlight: foundations.colors.baseTransparentWhite20,
+  skeletonLoadingHighlight: '$backgroundCoreOverlayLight',
   systemBgBlur: 'rgba(0, 0, 0, 0.01)',
   systemCaret: '$accentPrimary',
   systemScrollbar: 'rgba(255, 255, 255, 0.5)',
-  systemText: foundations.colors.baseWhite,
+  systemText: '$chrome1000',
   textDisabled: '$chrome300',
-  textInverse: '$chrome0',
   textLink: '$brand600',
   textOnAccent: '$chrome1000',
+  textOnInverse: '$chrome0',
   textPrimary: '$chrome900',
   textSecondary: '$chrome700',
   textTertiary: '$chrome500',