@100mslive/roomkit-react 0.1.1 → 0.1.2-alpha.1

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -1,50 +1,103 @@
 import React, { Fragment } from 'react';
 import {
-  selectIsConnectedToRoom,
+  DeviceType,
   selectLocalVideoTrackID,
   selectVideoTrackByID,
   useAVToggle,
+  useDevices,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';
+import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
 import { ToastManager } from './Toast/ToastManager';
+import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { isMacOS } from '../common/constants';
 
+const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
+
 export const AudioVideoToggle = () => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { videoInput, audioInput } = allDevices;
+
+  const formattedVideoInputList = videoInput?.map(videoInput => ({
+    active: selectedDeviceIDs.videoInput === videoInput.deviceId,
+    content: (
+      <Text
+        variant="sm"
+        onClick={() =>
+          updateDevice({
+            deviceType: DeviceType.videoInput,
+            deviceId: videoInput.deviceId,
+          })
+        }
+        css={optionsCSS}
+      >
+        {videoInput.label}
+      </Text>
+    ),
+    title: videoInput.label,
+  }));
+
+  const formattedAudioInputList = audioInput?.map(audioInput => ({
+    active: selectedDeviceIDs.audioInput === audioInput.deviceId,
+    content: (
+      <Text
+        variant="sm"
+        onClick={() =>
+          updateDevice({
+            deviceType: DeviceType.audioInput,
+            deviceId: audioInput.deviceId,
+          })
+        }
+        css={optionsCSS}
+      >
+        {audioInput.label}
+      </Text>
+    ),
+    title: audioInput.label,
+  }));
+
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const actions = useHMSActions();
-  const videoTracKId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTracKId));
-  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
+  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
 
   return (
     <Fragment>
       {toggleAudio ? (
-        <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
-          <IconButton active={isLocalAudioEnabled} onClick={toggleAudio} key="toggleAudio" data-testid="audio_btn">
-            {!isLocalAudioEnabled ? (
-              <MicOffIcon data-testid="audio_off_btn" />
-            ) : (
-              <MicOnIcon data-testid="audio_on_btn" />
-            )}
-          </IconButton>
-        </Tooltip>
+        <IconButtonWithOptions
+          options={formattedAudioInputList}
+          tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
+          icon={
+            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
+          }
+          active={isLocalAudioEnabled}
+          onClick={toggleAudio}
+          key="toggleAudio"
+        />
       ) : null}
+
       {toggleVideo ? (
-        <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
-          <IconButton key="toggleVideo" active={isLocalVideoEnabled} onClick={toggleVideo} data-testid="video_btn">
-            {!isLocalVideoEnabled ? (
+        <IconButtonWithOptions
+          options={formattedVideoInputList}
+          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
+          icon={
+            !isLocalVideoEnabled ? (
               <VideoOffIcon data-testid="video_off_btn" />
             ) : (
               <VideoOnIcon data-testid="video_on_btn" />
-            )}
-          </IconButton>
-        </Tooltip>
+            )
+          }
+          key="toggleVideo"
+          active={isLocalVideoEnabled}
+          onClick={toggleVideo}
+        />
       ) : null}
-      {localVideoTrack?.facingMode && isConnectedToRoom ? (
+
+      {localVideoTrack?.facingMode ? (
         <Tooltip title="Switch Camera" key="switchCamera">
           <IconButton
             onClick={async () => {

package/src/Prebuilt/components/BottomActionSheet/BottomActionSheet.jsx

@@ -13,7 +13,7 @@ const BottomActionSheet = ({
   sideOffset = -50,
   defaultHeight = 50,
 }) => {
-  const MINIMUM_HEIGHT = 20; // vh
+  const MINIMUM_HEIGHT = 40; // vh
   const [sheetOpen, setSheetOpen] = useState(false);
   const [sheetHeight, setSheetHeight] = useState(`${Math.min(Math.max(MINIMUM_HEIGHT, defaultHeight), 100)}vh`);
   const closeRef = useRef(null);

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -27,14 +27,18 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
   const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
 
   return pinnedMessage ? (
-    <Flex css={{ p: '$8', color: '$textMedEmp', bg: '$surfaceLight', r: '$1' }} align="center" justify="between">
+    <Flex
+      css={{ p: '$8', color: '$on_surface_medium', bg: '$surface_bright', r: '$1' }}
+      align="center"
+      justify="between"
+    >
       <Box>
         <PinIcon />
       </Box>
       <Box
         css={{
           ml: '$8',
-          color: '$textMedEmp',
+          color: '$on_surface_medium',
           w: '100%',
           maxHeight: '$18',
           overflowY: 'auto',

package/src/Prebuilt/components/Chat/ChatBody.jsx

@@ -46,16 +46,16 @@ const MessageTypeContainer = ({ left, right }) => {
         ml: 'auto',
         mr: '$4',
         p: '$2 $4',
-        border: '1px solid $textDisabled',
+        border: '1px solid $on_surface_low',
         r: '$0',
       }}
     >
       {left && (
-        <SenderName variant="tiny" as="span" css={{ color: '$textMedEmp' }}>
+        <SenderName variant="tiny" as="span" css={{ color: '$on_surface_medium' }}>
           {left}
         </SenderName>
       )}
-      {left && right && <Box css={{ borderLeft: '1px solid $textDisabled', mx: '$4', h: '$8' }} />}
+      {left && right && <Box css={{ borderLeft: '1px solid $on_surface_low', mx: '$4', h: '$8' }} />}
       {right && (
         <SenderName as="span" variant="tiny">
           {right}
@@ -87,7 +87,7 @@ const URL_REGEX =
   /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 const Link = styled('a', {
-  color: '$brandDefault',
+  color: '$primary_default',
   wordBreak: 'break-word',
   '&:hover': {
     textDecoration: 'underline',
@@ -132,14 +132,16 @@ const ChatActions = ({ onPin }) => {
       <Dropdown.Trigger asChild>
         <IconButton>
           <Tooltip title="More options">
-            <Box>
-              <HorizontalMenuIcon />
-            </Box>
+            <HorizontalMenuIcon />
           </Tooltip>
         </IconButton>
       </Dropdown.Trigger>
       <Dropdown.Portal>
-        <Dropdown.Content sideOffset={5} align="end" css={{ width: '$48' }}>
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0' }}
+        >
           <Dropdown.Item data-testid="pin_message_btn" onClick={onPin}>
             <PinIcon />
             <Text variant="sm" css={{ ml: '$4' }}>
@@ -192,7 +194,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
         align="center"
         css={{
           flexWrap: 'wrap',
-          bg: messageType ? '$surfaceLight' : undefined,
+          bg: messageType ? '$surface_bright' : undefined,
           r: messageType ? '$1' : undefined,
           px: messageType ? '$4' : '$2',
           py: messageType ? '$4' : 0,
@@ -203,7 +205,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
       >
         <Text
           css={{
-            color: '$textHighEmp',
+            color: '$on_surface_high',
             fontWeight: '$semiBold',
             display: 'inline-flex',
             alignItems: 'center',
@@ -225,7 +227,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
               variant="sm"
               css={{
                 ml: '$4',
-                color: '$textSecondary',
+                color: '$on_primary_medium',
                 flexShrink: 0,
               }}
             >

package/src/Prebuilt/components/Chat/ChatFooter.jsx

@@ -11,7 +11,7 @@ import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 const TextArea = styled('textarea', {
   width: '100%',
   bg: 'transparent',
-  color: '$textPrimary',
+  color: '$on_primary_high',
   resize: 'none',
   lineHeight: '1rem',
   position: 'relative',
@@ -105,7 +105,7 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => {
     <Flex
       align="center"
       css={{
-        bg: '$surfaceLight',
+        bg: '$surface_bright',
         minHeight: '$16',
         maxHeight: '$24',
         position: 'relative',

package/src/Prebuilt/components/Chat/ChatHeader.jsx

@@ -13,7 +13,7 @@ export const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSel
       onClick={onToggle}
       align="center"
       css={{
-        color: '$textPrimary',
+        color: '$on_primary_high',
         h: '$16',
         mb: '$2',
       }}
@@ -24,7 +24,7 @@ export const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSel
           asChild
           data-testid="participant_list_filter"
           css={{
-            border: '1px solid $textDisabled',
+            border: '1px solid $on_surface_low',
             r: '$0',
             p: '$2 $4',
             ml: '$8',
@@ -35,7 +35,7 @@ export const ChatHeader = React.memo(({ selection, selectorOpen, onToggle, onSel
             <Text variant="sm" css={{ ...textEllipsis(80) }}>
               {selection}
             </Text>
-            <Box css={{ ml: '$2', color: '$textDisabled' }}>
+            <Box css={{ ml: '$2', color: '$on_surface_low' }}>
               {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
             </Box>
           </Flex>

package/src/Prebuilt/components/Chat/ChatSelector.jsx

@@ -14,14 +14,14 @@ import { ParticipantSearch } from '../Header/ParticipantList';
 import { useFilteredRoles } from '../../common/hooks';
 
 const ChatDotIcon = () => {
-  return <Box css={{ size: '$6', bg: '$brandDefault', mx: '$2', r: '$round' }} />;
+  return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;
 };
 
 const SelectorItem = ({ value, active, onClick, unreadCount }) => {
   return (
     <Dropdown.Item data-testid="chat_members" css={{ align: 'center', px: '$10' }} onClick={onClick}>
       <Text variant="sm">{value}</Text>
-      <Flex align="center" css={{ ml: 'auto', color: '$textPrimary' }}>
+      <Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
         {unreadCount > 0 && (
           <Tooltip title={`${unreadCount} unread`}>
             <Box css={{ mr: active ? '$3' : 0 }}>

package/src/Prebuilt/components/Chat/useEmojiPickerStyles.js

@@ -9,16 +9,16 @@ export const useEmojiPickerStyles = showing => {
         const style = document.createElement('style');
         style.textContent = `
           #root {
-            --em-rgb-color: var(--hms-ui-colors-textPrimary);
-            --em-rgb-input: var(--hms-ui-colors-textPrimary);
-            --em-color-border: var(--hms-ui-colors-surfaceDefault);
-            --color-b: var(--hms-ui-colors-textPrimary);
+            --em-rgb-color: var(--hms-ui-colors-on_primary_high);
+            --em-rgb-input: var(--hms-ui-colors-on_primary_high);
+            --em-color-border: var(--hms-ui-colors-surface_default);
+            --color-b: var(--hms-ui-colors-on_primary_high);
             --rgb-background: transparent;
-            color: var(--hms-ui-colors-textPrimary);
+            color: var(--hms-ui-colors-on_primary_high);
             font-family: var(--hms-ui-fonts-sans);
           }
           .sticky {
-            background-color: var(--hms-ui-colors-surfaceLight);
+            background-color: var(--hms-ui-colors-surface_bright);
           }
         `;
         root?.appendChild(style);

package/src/Prebuilt/components/Chip.jsx

@@ -0,0 +1,24 @@
+import { Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+const Chip = ({
+  icon = <></>,
+  content = '',
+  backgroundColor = '$surface_default',
+  textColor = '$on_surface_high',
+  hideIfNoContent = false,
+}) => {
+  if (hideIfNoContent && !content) {
+    return;
+  }
+  return (
+    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4' }}>
+      {icon}
+      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
+        {content}
+      </Text>
+    </Flex>
+  );
+};
+
+export default Chip;

package/src/Prebuilt/components/Connection/ConnectionIndicator.jsx

@@ -10,7 +10,7 @@ const Wrapper = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '$transparentBg',
+  backgroundColor: '$background_dim',
   borderRadius: '$round',
   variants: {
     isTile: {
@@ -25,7 +25,7 @@ const Wrapper = styled('span', {
 export const ConnectionIndicator = ({ peerId, isTile = false }) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
-  const defaultColor = theme.colors.bgTertiary;
+  const defaultColor = theme.colors.surface_brighter;
   if (downlinkQuality === -1 || downlinkQuality === undefined) {
     return null;
   }
@@ -57,21 +57,21 @@ export const ConnectionIndicator = ({ peerId, isTile = false }) => {
         >
           <path
             d="M6.875 0c2.549.035 4.679.902 6.445 2.648.366.362.45.796.216 1.096-.239.306-.714.34-1.142.072a2.28 2.28 0 0 1-.341-.271C9.24.862 4.924.775 1.992 3.346c-.284.249-.594.419-.983.393-.272-.019-.49-.135-.613-.388-.125-.261-.05-.498.114-.713.073-.092.156-.177.245-.254C2.516.804 4.591.039 6.875 0Z"
-            fill={getColor(4, downlinkQuality, defaultColor)}
+            fill={getColor(4, downlinkQuality, defaultColor, theme)}
             transform="translate(-.333)"
           />
           <path
             d="M7.056 2.964c1.756.035 3.208.7 4.499 1.763.162.134.277.315.354.512.098.251.114.503-.075.72-.193.222-.452.259-.725.198-.293-.066-.518-.247-.738-.443a4.859 4.859 0 0 0-6.198-.26c-.166.127-.318.271-.475.409-.242.211-.513.343-.843.317-.43-.034-.679-.397-.561-.81.062-.211.181-.4.345-.546 1.265-1.162 2.733-1.836 4.417-1.86Z"
-            fill={getColor(3, downlinkQuality, defaultColor)}
+            fill={getColor(3, downlinkQuality, defaultColor, theme)}
             transform="translate(-.333)"
           />
           <path
             d="M7.384,6.052C8.293,6.068 9.157,6.449 9.783,7.108C10.005,7.339 10.157,7.6 10.07,7.942C9.959,8.377 9.435,8.581 9.071,8.243C7.935,7.191 6.356,7.183 5.152,8.183C4.816,8.462 4.6,8.485 4.332,8.27C4.063,8.055 3.998,7.691 4.177,7.358C4.273,7.179 4.414,7.038 4.57,6.911C5.26,6.349 6.149,6.05 7.384,6.052L7.384,6.052Z"
-            fill={getColor(2, downlinkQuality, defaultColor)}
+            fill={getColor(2, downlinkQuality, defaultColor, theme)}
           />
           <path
             d="M8.214,9.941C8.214,10.234 8.097,10.515 7.888,10.721C7.68,10.928 7.398,11.042 7.104,11.039C6.471,11.036 5.982,10.541 5.993,9.912C6.004,9.259 6.499,8.766 7.133,8.779C7.744,8.791 8.22,9.301 8.214,9.941Z"
-            fill={getColor(1, downlinkQuality, defaultColor)}
+            fill={getColor(1, downlinkQuality, defaultColor, theme)}
           />
         </svg>
       </Wrapper>

package/src/Prebuilt/components/Connection/TileConnection.jsx

@@ -8,7 +8,7 @@ const TileConnection = ({ name, peerId, hideLabel, width }) => {
       {!hideLabel ? (
         <Text
           css={{
-            c: '$textHighEmp',
+            c: '$on_surface_high',
             ...textEllipsis(width - 60),
           }}
           variant="xs"
@@ -28,7 +28,7 @@ const Wrapper = styled('div', {
   position: 'absolute',
   bottom: '$2',
   left: '$2',
-  backgroundColor: '$backgroundDark',
+  backgroundColor: '$background_dim',
   borderRadius: '$1',
   maxWidth: '85%',
   zIndex: 1,

package/src/Prebuilt/components/Connection/connectionQualityUtils.js

@@ -23,17 +23,17 @@ export const getTooltipText = connectionScore => {
  * @param connectionScore -> 0 to 5, 0 means disconnected
  * @param defaultColor -> color for components not taking the connection color
  */
-export const getColor = (position, connectionScore, defaultColor) => {
+export const getColor = (position, connectionScore, defaultColor, theme) => {
   const shouldBeColored = position <= connectionScore;
   if (!shouldBeColored) {
     return defaultColor;
   }
   if (connectionScore >= 4) {
-    return '#37F28D';
+    return theme.colors.alert_success;
   } else if (connectionScore >= 3) {
-    return '#FAC919';
+    return theme.colors.alert_warning;
   } else if (connectionScore >= 1) {
-    return '#ED4C5A';
+    return theme.colors.alert_default;
   }
   return defaultColor;
 };

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -13,7 +13,7 @@ import {
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../Dropdown';
-import { Box, Flex } from '../../Layout';
+import { Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { styled } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
@@ -79,13 +79,11 @@ export const EmojiReaction = () => {
         <Dropdown.Trigger asChild data-testid="emoji_reaction_btn">
           <IconButton>
             <Tooltip title="Emoji reaction">
-              <Box>
-                <EmojiIcon />
-              </Box>
+              <EmojiIcon />
             </Tooltip>
           </IconButton>
         </Dropdown.Trigger>
-        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surfaceDefault' }}>
+        <Dropdown.Content sideOffset={5} align="center" css={{ p: '$8', bg: '$surface_default' }}>
           {emojiReactionList.map((emojiLine, index) => (
             <Flex key={index} justify="between" css={{ mb: '$8' }}>
               {emojiLine.map(emoji => (
@@ -100,7 +98,7 @@ export const EmojiReaction = () => {
               variant="sm"
               inline={true}
               css={{
-                color: '$textSecondary',
+                color: '$on_primary_medium',
               }}
             >
               Reactions will be timed for Live Streaming viewers.{' '}
@@ -109,12 +107,17 @@ export const EmojiReaction = () => {
               variant="sm"
               inline={true}
               css={{
-                color: '$primaryLight',
+                color: '$primary_bright',
                 fontWeight: '$semiBold',
               }}
             >
-              <a href={HLS_TIMED_METADATA_DOC_URL} target="_blank" rel="noopener noreferrer">
-                {'Learn more ->'}
+              <a
+                href={HLS_TIMED_METADATA_DOC_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: 'inherit', textDecoration: 'none' }}
+              >
+                Learn more.
               </a>
             </Text>
           </div>
@@ -132,7 +135,7 @@ const EmojiContainer = styled('span', {
   p: '$4',
   '&:hover': {
     p: '7px',
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
     borderRadius: '$1',
   },
 });

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -37,8 +37,8 @@ export class ErrorBoundary extends Component {
             size: '100%',
             height: '100vh',
             width: '100%',
-            color: '$textPrimary',
-            backgroundColor: 'black',
+            color: '$on_primary_high',
+            backgroundColor: '$background_default',
           }}
         >
           <Box css={{ position: 'relative', overflow: 'hidden', r: '$3', height: '100%', width: '100%' }}>

package/src/Prebuilt/components/Footer/ConferencingFooter.jsx

@@ -1,8 +1,7 @@
 import React, { Fragment, Suspense, useState } from 'react';
 import { useMedia } from 'react-use';
-import { HMSPlaylistType, selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
 import { MusicIcon } from '@100mslive/react-icons';
-import { Playlist } from '../../components/Playlist/Playlist';
 import { config as cssConfig, Flex, Footer as AppFooter, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -64,8 +63,6 @@ export const ConferencingFooter = () => {
     <AppFooter.Root>
       <AppFooter.Left>
         <ScreenshareAudio />
-        <Playlist type={HMSPlaylistType.audio} />
-        <Playlist type={HMSPlaylistType.video} />
         <Suspense fallback="">
           <VirtualBackground />
         </Suspense>

package/src/Prebuilt/components/FullPageProgress.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Flex } from '../../Layout';
 import { Loading } from '../../Loading';
+import { Text } from '../../Text';
 
-const FullPageProgress = () => (
-  <Flex justify="center" align="center" css={{ size: '100%' }}>
-    <Loading size={100} />
+const FullPageProgress = ({ loaderColor = '$primary_default', loadingText = '' }) => (
+  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor }}>
+    <Loading color="currentColor" size={100} />
+    {loadingText ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{loadingText}</Text> : null}
   </Flex>
 );
 

package/src/Prebuilt/components/GoLiveButton.jsx

@@ -27,10 +27,7 @@ const GoLiveButton = () => {
       <Button
         data-testid="go_live"
         variant={isStreamingSidepaneOpen ? 'standard' : 'primary'}
-        onClick={() => {
-          toggleStreaming();
-          window.sessionStorage.setItem('userStartedStream', 'true');
-        }}
+        onClick={toggleStreaming}
         icon
         loading={isRTMPStartedFromUI || isHLSStartedFromUI}
         disabled={isBrowserRecordingOn && !isStreamingOn}

package/src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx

@@ -10,7 +10,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
       <Dropdown.Trigger asChild data-testid="quality_selector">
         <Flex
           css={{
-            color: '$textPrimary',
+            color: '$on_primary_high',
             r: '$1',
             cursor: 'pointer',
             p: '$2',
@@ -44,7 +44,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                         mx: '$2',
                         w: '$2',
                         h: '$2',
-                        background: '$textPrimary',
+                        background: '$on_primary_high',
                         r: '$1',
                       }}
                     />

package/src/Prebuilt/components/HMSVideo/PlayButton.jsx

@@ -4,7 +4,7 @@ import { IconButton, Tooltip } from '../../../';
 
 export const PlayButton = ({ onClick, isPaused }) => {
   return (
-    <Tooltip title={`${isPaused ? 'Play' : 'Pause'}`} side="top">
+    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
       <IconButton onClick={onClick} data-testid="play_pause_btn">
         {isPaused ? <PlayIcon width={32} height={32} /> : <PauseIcon width={32} height={32} />}
       </IconButton>

package/src/Prebuilt/components/HMSVideo/VideoProgress.jsx

@@ -52,7 +52,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
         css={{
           display: 'inline',
           width: `${videoProgress}%`,
-          background: '$primaryDefault',
+          background: '$primary_default',
           height: '0.3rem',
         }}
       />
@@ -60,7 +60,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
         id="video-buffer"
         css={{
           width: `${bufferProgress - videoProgress}%`,
-          background: '$primaryDark',
+          background: '$primary_dim',
           height: '0.3rem',
         }}
       />
@@ -68,7 +68,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
         id="video-rest"
         css={{
           width: `${100 - bufferProgress}%`,
-          background: '$grayLight',
+          background: '$surface_brighter',
           height: '0.3rem',
         }}
       />

package/src/Prebuilt/components/HMSVideo/VideoTime.jsx

@@ -26,6 +26,8 @@ export const VideoTime = ({ hlsPlayer }) => {
       variant={{
         '@sm': 'xs',
       }}
-    >{`${videoTime}`}</Text>
+    >
+      {videoTime}
+    </Text>
   ) : null;
 };

package/src/Prebuilt/components/HMSVideo/VolumeControl.jsx

@@ -6,7 +6,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
   const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
 
   return (
-    <Flex align="center" css={{ color: '$white' }}>
+    <Flex align="center" css={{ color: '$on_primary_high' }}>
       <SpeakerIcon
         style={{ cursor: 'pointer' }}
         onClick={() => {