GetStream · kristian-mkd · Oct 7, 2024 · Sep 26, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/AcceptCallButton.tsx
@@ -61,7 +61,7 @@ export const AcceptCallButton = ({
       size={buttonSizes.lg}
       style={acceptCallButton}
     >
-      <Phone color={colors.static_white} />
+      <Phone color={colors.base1} />
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx
@@ -40,7 +40,7 @@ export const CallControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.base4 },
         callControls.container,
         landscapeStyles,
         style,

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx
@@ -66,14 +66,12 @@ export const CallControlsButton = (
   const pressableStyle: PressableProps['style'] = ({ pressed }) => [
     styles.container,
     {
-      backgroundColor: disabled
-        ? colors.disabled
-        : colorProp || colors.static_white,
+      backgroundColor: disabled ? colors.disabled : colorProp || colors.base1,
       opacity: pressed ? 0.2 : 1,
       height: size || buttonSizes.sm,
       width: size || buttonSizes.sm,
       borderRadius: (size || buttonSizes.sm) / 2,
-      borderColor: colors.content_bg,
+      borderColor: colors.background1,
     },
     styleProp?.container ?? null,
     container,

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ChatButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ChatButton.tsx
@@ -36,7 +36,7 @@ export const ChatButton = ({
   return (
     <CallControlsButton onPress={onPressHandler} style={chatButton}>
       <UnreadBadgeCountIndicator count={unreadBadgeCount} />
-      <Chat color={colors.static_black} />
+      <Chat color={colors.base5} />
     </CallControlsButton>
   );
 };
@@ -63,7 +63,7 @@ const UnreadBadgeCountIndicator = ({
       <Text
         style={[
           styles.chatBadgeText,
-          { color: colors.static_white },
+          { color: colors.base1 },
           typefaces.subtitle,
         ]}
       >

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/HangupCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/HangupCallButton.tsx
@@ -72,7 +72,7 @@ export const HangUpCallButton = ({
       size={size}
       testID={ButtonTestIds.HANG_UP_CALL}
     >
-      <PhoneDown color={colors.static_white} />
+      <PhoneDown color={colors.base1} />
     </CallControlsButton>
   );
 };

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx
@@ -71,7 +71,7 @@ export const ReactionsButton = ({
           onPress={reactionsButtonHandler}
           onLayout={onReactionsButtonLayout}
         >
-          <Reaction color={colors.static_black} />
+          <Reaction color={colors.base5} />
         </CallControlsButton>
       </Restricted>
       {showReactionsPicker && (

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/RejectCallButton.tsx
@@ -69,7 +69,7 @@ export const RejectCallButton = ({
       // svgContainerStyle={theme.icon.lg}
       style={rejectCallButton}
     >
-      <PhoneDown color={colors.static_white} />
+      <PhoneDown color={colors.base1} />
     </CallControlsButton>
   );
 };
diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ScreenShareToggleButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ScreenShareToggleButton.tsx
@@ -48,16 +48,16 @@ export const ScreenShareToggleButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={hasPublishedScreenShare ? colors.error : colors.static_white}
+      color={hasPublishedScreenShare ? colors.error : colors.base1}
       style={{
         container: screenShareToggleButton.container,
         svgContainer: screenShareToggleButton.svgContainer,
       }}
     >
       {hasPublishedScreenShare ? (
-        <StopScreenShare color={colors.static_black} />
+        <StopScreenShare color={colors.base5} />
       ) : (
-        <ScreenShare color={colors.static_black} />
+        <ScreenShare color={colors.base5} />
       )}
       {Platform.OS === 'ios' && (
         <ScreenCapturePickerView ref={screenCapturePickerViewiOSRef} />

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPreviewButton.tsx
@@ -42,22 +42,20 @@ export const ToggleAudioPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={!optimisticIsMute ? colors.static_white : colors.static_black}
+      color={!optimisticIsMute ? colors.base1 : colors.base5}
       size={buttonSizes.md}
       style={{
         container: {
-          shadowColor: !optimisticIsMute
-            ? colors.static_white
-            : colors.static_black,
+          shadowColor: !optimisticIsMute ? colors.base1 : colors.base5,
           ...toggleAudioPreviewButton.container,
         },
         svgContainer: toggleAudioPreviewButton.svgContainer,
       }}
     >
       {!optimisticIsMute ? (
-        <Mic color={colors.static_black} />
+        <Mic color={colors.base5} />
       ) : (
-        <MicOff color={colors.static_white} />
+        <MicOff color={colors.base1} />
       )}
     </CallControlsButton>
   );

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx
@@ -41,13 +41,13 @@ export const ToggleAudioPublishingButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
       <CallControlsButton
         onPress={onPress}
-        color={!optimisticIsMute ? colors.static_white : colors.overlay_dark}
+        color={!optimisticIsMute ? colors.base1 : colors.background4}
         style={toggleAudioPublishingButton}
       >
         {!optimisticIsMute ? (
-          <Mic color={colors.static_black} />
+          <Mic color={colors.base2} />
         ) : (
-          <MicOff color={colors.static_white} />
+          <MicOff color={colors.base1} />
         )}
       </CallControlsButton>
     </Restricted>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleCameraFaceButton.tsx
@@ -47,15 +47,15 @@ export const ToggleCameraFaceButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={direction === 'back' ? colors.overlay_dark : colors.static_white}
+        color={direction === 'back' ? colors.background4 : colors.base1}
         disabled={optimisticIsMute}
         style={toggleCameraFaceButton}
       >
         <CameraSwitch
           color={
             direction === 'front' || direction === undefined
-              ? colors.static_black
-              : colors.static_white
+              ? colors.base5
+              : colors.base1
           }
         />
       </CallControlsButton>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx
@@ -47,22 +47,20 @@ export const ToggleVideoPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={!optimisticIsMute ? colors.static_white : colors.static_black}
+      color={!optimisticIsMute ? colors.base1 : colors.base5}
       size={buttonSizes.md}
       style={{
         container: {
-          shadowColor: !optimisticIsMute
-            ? colors.static_white
-            : colors.static_black,
+          shadowColor: !optimisticIsMute ? colors.base1 : colors.base5,
           ...toggleVideoPreviewButton.container,
         },
         svgContainer: toggleVideoPreviewButton.svgContainer,
       }}
     >
       {!optimisticIsMute ? (
-        <Video color={colors.static_black} />
+        <Video color={colors.base5} />
       ) : (
-        <VideoSlash color={colors.static_white} />
+        <VideoSlash color={colors.base1} />
       )}
     </CallControlsButton>
   );

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx b/packages/react-native-sdk/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx
@@ -45,12 +45,12 @@ export const ToggleVideoPublishingButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={!optimisticIsMute ? colors.static_white : colors.overlay_dark}
+        color={!optimisticIsMute ? colors.base1 : colors.background4}
       >
         {!optimisticIsMute ? (
-          <Video color={colors.static_black} />
+          <Video color={colors.base5} />
         ) : (
-          <VideoSlash color={colors.static_white} />
+          <VideoSlash color={colors.base1} />
         )}
       </CallControlsButton>
     </Restricted>

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx b/packages/react-native-sdk/src/components/Call/CallControls/internal/ReactionsPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import {
   LayoutRectangle,
   Pressable,
@@ -18,20 +18,20 @@ type ReactionPickerProps = Pick<ReactionsButtonProps, 'supportedReactions'> & {
   onRequestedClose: () => void;
 };
 
-const TOP_PADDING = 4;
-const REACTION_MARGIN_BOTTOM = 4;
-
 export const ReactionsPicker = ({
   supportedReactions = defaultEmojiReactions,
   reactionsButtonLayoutRectangle,
   onRequestedClose,
 }: ReactionPickerProps) => {
   const {
-    theme: { colors, reactionsPicker },
+    theme: { colors, reactionsPicker, variants },
   } = useTheme();
+  const styles = useStyles();
   const call = useCall();
   const size = reactionsButtonLayoutRectangle?.width ?? 0;
   const reactionItemSize = size * 0.8;
+  const TOP_PADDING = variants.spacingSizes.xs;
+  const REACTION_MARGIN_BOTTOM = variants.spacingSizes.xs;
 
   const popupHeight =
     // the top padding
@@ -104,7 +104,7 @@ export const ReactionsPicker = ({
           styles.reactionsPopup,
           reactionsPopupStyle,
           {
-            backgroundColor: colors.static_grey,
+            backgroundColor: colors.base4,
           },
           reactionsPicker.reactionsPopup,
         ]}
@@ -120,8 +120,7 @@ export const ReactionsPicker = ({
               styles.reactionItem,
               reactionItemStyle,
               {
-                // temporary background color until we have theming
-                backgroundColor: colors.overlay,
+                backgroundColor: colors.background3,
               },
               reactionsPicker.reactionItem,
             ]}
@@ -159,7 +158,7 @@ export const ReactionsPicker = ({
         style={[
           reactionsButtonDimmerStyle,
           {
-            backgroundColor: colors.static_grey,
+            backgroundColor: colors.base4,
           },
           reactionsPicker.reactionsButtonDimmer,
         ]}
@@ -169,22 +168,29 @@ export const ReactionsPicker = ({
   );
 };
 
-const styles = StyleSheet.create({
-  reactionsPopup: {
-    position: 'absolute',
-    alignItems: 'center',
-    paddingTop: TOP_PADDING,
-  },
-  reactionsButtonDimmer: {
-    position: 'absolute',
-    opacity: 0.5,
-  },
-  reactionItem: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: REACTION_MARGIN_BOTTOM,
-  },
-  reactionText: {
-    fontSize: 18.5,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        reactionsPopup: {
+          position: 'absolute',
+          alignItems: 'center',
+          paddingTop: theme.variants.spacingSizes.xs,
+        },
+        reactionsButtonDimmer: {
+          position: 'absolute',
+          opacity: 0.5,
+        },
+        reactionItem: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: theme.variants.spacingSizes.xs,
+        },
+        reactionText: {
+          fontSize: 18.5,
+        },
+      }),
+    [theme]
+  );
+};
diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -100,7 +100,7 @@ export const CallParticipantsGrid = ({
       style={[
         styles.container,
         landscapeStyles,
-        { backgroundColor: colors.dark_gray },
+        { backgroundColor: colors.background2 },
         callParticipantsGrid.container,
       ]}
       testID={ComponentTestIds.CALL_PARTICIPANTS_GRID}

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
@@ -98,7 +98,7 @@ export const CallParticipantsSpotlight = ({
         styles.container,
         landscapeStyles,
         {
-          backgroundColor: colors.dark_gray,
+          backgroundColor: colors.background2,
         },
         callParticipantsSpotlight.container,
       ]}

diff --git a/packages/react-native-sdk/src/components/Call/CallTopView/CallTopView.tsx b/packages/react-native-sdk/src/components/Call/CallTopView/CallTopView.tsx
@@ -91,15 +91,15 @@ export const CallTopView = ({
               ]}
               onPress={onBackPressed}
             >
-              <Back color={colors.static_white} />
+              <Back color={colors.base1} />
             </Pressable>
           )}
         </View>
         <View style={[styles.centerElement, callTopView.centerElement]}>
           {title ? (
             <Text
               style={[
-                { color: colors.static_white },
+                { color: colors.base1 },
                 typefaces.subtitleBold,
                 callTopView.title,
               ]}
@@ -111,7 +111,7 @@ export const CallTopView = ({
             isCallReconnecting && (
               <Text
                 style={[
-                  { color: colors.static_white },
+                  { color: colors.base1 },
                   typefaces.subtitleBold,
                   callTopView.title,
                 ]}

diff --git a/packages/react-native-sdk/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx b/packages/react-native-sdk/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx
@@ -70,13 +70,13 @@ export const ParticipantsInfoBadge = ({
           participantInfoBadge.participantsIconContainer,
         ]}
       >
-        <Participants color={colors.static_white} />
+        <Participants color={colors.base1} />
       </View>
       <View
         style={[
           styles.participantCountContainer,
           {
-            backgroundColor: colors.text_low_emphasis,
+            backgroundColor: colors.base3,
           },
           participantInfoBadge.participantCountContainer,
         ]}
@@ -86,7 +86,7 @@ export const ParticipantsInfoBadge = ({
           style={[
             styles.participantCountText,
             {
-              color: colors.static_white,
+              color: colors.base1,
             },
             typefaces.subtitle,
             participantInfoBadge.participantsCountText,

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx b/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx
@@ -54,7 +54,7 @@ export const JoinCallButton = ({
         style={[
           styles.label,
           {
-            color: colors.static_white,
+            color: colors.base1,
           },
           typefaces.subtitleBold,
           joinCallButton.label,