@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

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/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={() => {

package/src/Prebuilt/components/Header/AdditionalRoomState.jsx

@@ -76,9 +76,9 @@ export const AdditionalRoomState = () => {
         <Flex
           align="center"
           css={{
-            color: '$textPrimary',
+            color: '$on_primary_high',
             borderRadius: '$1',
-            border: '1px solid $textDisabled',
+            border: '1px solid $on_surface_low',
             padding: '$4',
             '@sm': { display: 'none' },
           }}
@@ -86,47 +86,47 @@ export const AdditionalRoomState = () => {
         >
           {!isAudioshareInactive && (
             <Tooltip title="Screenshare Audio">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <MusicIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {shouldShowScreenShareState && (
             <Tooltip title="Screenshare">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <ShareScreenIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {shouldShowVideoState && (
             <Tooltip title="video playlist">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <VideoPlayerIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {!isPlaylistInactive && (
             <Tooltip title="Playlist Music">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <AudioPlayerIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
           {whiteboardOwner && (
             <Tooltip title="Whiteboard">
-              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+              <Flex align="center" css={{ color: '$on_primary_high', mx: '$2' }}>
                 <PencilDrawIcon width={24} height={24} />
               </Flex>
             </Tooltip>
           )}
-          <Box css={{ '@lg': { display: 'none' }, color: '$textDisabled' }}>
+          <Box css={{ '@lg': { display: 'none' }, color: '$on_surface_low' }}>
             {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </Box>
         </Flex>
       </Dropdown.Trigger>
       <Dropdown.Content sideOffset={5} align="end" css={{ w: '$60' }}>
         {!isPlaylistInactive && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <AudioPlayerIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Playlist is playing
@@ -134,7 +134,7 @@ export const AdditionalRoomState = () => {
             {playlist.peer.isLocal ? (
               <Text
                 variant="sm"
-                css={{ color: '$error', cursor: 'pointer', ml: '$2' }}
+                css={{ color: '$alert_error_default', cursor: 'pointer', ml: '$2' }}
                 onClick={e => {
                   e.preventDefault();
                   playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);
@@ -145,7 +145,7 @@ export const AdditionalRoomState = () => {
             ) : (
               <Text
                 variant="sm"
-                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
                 onClick={e => {
                   e.preventDefault();
                   playlist.setVolume(!playlist.track.volume ? 100 : 0);
@@ -157,14 +157,14 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {!isAudioshareInactive && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <MusicIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Music is playing
             </Text>
             <Text
               variant="sm"
-              css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+              css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
               onClick={e => {
                 e.preventDefault();
                 screenshareAudio.onToggle();
@@ -175,7 +175,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {shouldShowScreenShareState && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <ShareScreenIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               {`Shared by: ${screenSharingPeerId === localPeerID ? 'You' : screenSharingPeerName}`}
@@ -183,7 +183,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {shouldShowVideoState && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <VideoPlayerIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}
@@ -191,7 +191,7 @@ export const AdditionalRoomState = () => {
           </Dropdown.Item>
         )}
         {whiteboardOwner && (
-          <Dropdown.Item css={{ color: '$textPrimary' }}>
+          <Dropdown.Item css={{ color: '$on_primary_high' }}>
             <PencilDrawIcon width={24} height={24} />
             <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
               Whiteboard Owner - {whiteboardOwner.name}
@@ -200,7 +200,7 @@ export const AdditionalRoomState = () => {
             {amIWhiteboardOwner && (
               <Text
                 variant="sm"
-                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                css={{ color: '$alert_error_default', ml: '$2', cursor: 'pointer' }}
                 onClick={e => {
                   e.preventDefault();
                   toggleWhiteboard();

package/src/Prebuilt/components/Header/AmbientMusic.jsx

@@ -79,7 +79,7 @@ export const AmbientMusic = () => {
   }
 
   return (
-    <Tooltip title={`${playing ? `Disable Ambient Music` : `Play Ambient Music`}`} key="ambient-music">
+    <Tooltip title={playing ? `Disable Ambient Music` : `Play Ambient Music`} key="ambient-music">
       <IconButton css={{ mx: '$4' }} onClick={toggleAmbientMusic} active={!playing}>
         <MusicIcon />
       </IconButton>