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

package/src/Prebuilt/layouts/mainView.jsx

@@ -1,16 +1,20 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useCallback, useEffect } from 'react';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
   selectPeerScreenSharing,
   selectPeerSharingAudio,
   selectPeerSharingVideoPlaylist,
+  selectPermissions,
   selectTemplateAppData,
   useHMSActions,
   useHMSStore,
+  useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import FullPageProgress from '../components/FullPageProgress';
 import { Flex } from '../../Layout';
+import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { EmbedView } from './EmbedView';
 import { InsetView } from './InsetView';
 import { MainGridView } from './mainGridView';
@@ -25,11 +29,12 @@ import {
   useIsHeadless,
   usePDFAnnotator,
   usePinnedTrack,
+  useSetAppDataByKey,
   useUISettings,
   useUrlToEmbed,
   useWaitingViewerRole,
 } from '../components/AppData/useUISettings';
-import { SESSION_STORE_KEY, UI_MODE_ACTIVE_SPEAKER } from '../common/constants';
+import { APP_DATA, SESSION_STORE_KEY, UI_MODE_ACTIVE_SPEAKER } from '../common/constants';
 
 // const WhiteboardView = React.lazy(() => import("./WhiteboardView"));
 const HLSView = React.lazy(() => import('./HLSView'));
@@ -52,7 +57,30 @@ export const ConferenceMainView = () => {
   const hlsViewerRole = useHLSViewerRole();
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
-  const pdfAnntatorActive = usePDFAnnotator();
+  const pdfAnnotatorActive = usePDFAnnotator();
+
+  const { isHLSRunning } = useRecordingStreaming();
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore(selectPermissions);
+  const roomLayout = useRoomLayout();
+  const { join_form: joinForm = {} } = roomLayout?.screens?.preview?.default?.elements || {};
+
+  const startHLS = useCallback(async () => {
+    try {
+      if (isHLSStarted) {
+        return;
+      }
+      setHLSStarted(true);
+      await hmsActions.startHLSStreaming({});
+    } catch (error) {
+      if (error.message.includes('invalid input')) {
+        await startHLS();
+        return;
+      }
+      setHLSStarted(false);
+    }
+  }, [hmsActions, isHLSStarted, setHLSStarted]);
+
   useEffect(() => {
     if (!isConnected) {
       return;
@@ -66,8 +94,17 @@ export const ConferenceMainView = () => {
       hmsActions.audioPlaylist.setList(audioPlaylist);
     }
 
+    // Is a streaming kit and broadcaster joins
+    if (
+      permissions?.hlsStreaming &&
+      !isHLSRunning &&
+      joinForm.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE
+    ) {
+      startHLS();
+    }
+
     hmsActions.sessionStore.observe([SESSION_STORE_KEY.PINNED_MESSAGE, SESSION_STORE_KEY.SPOTLIGHT]);
-  }, [isConnected, hmsActions]);
+  }, [isConnected, hmsActions, permissions, joinForm]);
 
   if (!localPeerRole) {
     // we don't know the role yet to decide how to render UI
@@ -79,7 +116,7 @@ export const ConferenceMainView = () => {
     ViewComponent = HLSView;
   } else if (localPeerRole === waitingViewerRole) {
     ViewComponent = WaitingView;
-  } else if (pdfAnntatorActive) {
+  } else if (pdfAnnotatorActive) {
     ViewComponent = PDFView;
   } else if (urlToIframe) {
     ViewComponent = EmbedView;

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -110,7 +110,7 @@ export function FlyingEmoji() {
               css={{
                 width: 'fit-content',
                 padding: '$2 $4',
-                background: '$surfaceLight',
+                background: '$surface_bright',
                 borderRadius: '$1',
               }}
             >
@@ -118,7 +118,7 @@ export function FlyingEmoji() {
                 css={{
                   fontSize: '$space$6',
                   lineHeight: '$xs',
-                  color: '$textHighEmp',
+                  color: '$on_surface_high',
                 }}
               >
                 {emoji.senderName}

package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx

@@ -71,6 +71,7 @@ export const VirtualBackground = () => {
 
   return (
     <Tooltip
+      boxCss={{ zIndex: '100' }}
       title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}
     >
       <IconButton

package/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx

@@ -25,9 +25,7 @@ export const ToggleWhiteboard = () => {
 
   return (
     <Tooltip
-      title={`${
-        whiteboardActive ? (amIWhiteboardOwner ? `Stop whiteboard` : `Can't stop whiteboard`) : 'Start whiteboard'
-      }`}
+      title={whiteboardActive ? (amIWhiteboardOwner ? `Stop whiteboard` : `Can't stop whiteboard`) : 'Start whiteboard'}
       key="whiteboard"
     >
       <IconButton

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -21,7 +21,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
           <Flex justify="between">
             <Flex align="center" css={{ mb: '$1' }}>
               {Icon ? (
-                <Box css={{ mr: '$2', color: '$textPrimary', ...iconCSS }}>
+                <Box css={{ mr: '$2', color: '$on_primary_high', ...iconCSS }}>
                   <Icon />
                 </Box>
               ) : null}
@@ -49,7 +49,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
         onEscapeKeyDown={e => e.preventDefault()}
         onPointerDownOutside={e => e.preventDefault()}
         closeable={false}
-        iconCSS={{ color: '$error' }}
+        iconCSS={{ color: '$alert_error_default' }}
         {...props}
       >
         <Box css={{ mt: '$lg' }}>{children}</Box>
@@ -73,7 +73,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
             fontWeight: 400,
             mt: '$4',
             mb: '$10',
-            c: '$textMedEmp',
+            c: '$on_surface_medium',
           }}
         >
           {body}
@@ -195,7 +195,7 @@ export const DialogInputFile = ({ value, onChange, placeholder, disabled, type,
         position: 'relative',
         cursor: 'pointer',
         py: '$12',
-        border: '1px dashed $borderLight',
+        border: '1px dashed $border_bright',
         r: '$1',
         height: 'max(140px, 30%)',
         alignItems: 'center',

package/src/Prebuilt/primitives/DropdownTrigger.jsx

@@ -8,8 +8,8 @@ const DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleC
       asChild
       data-testid={`${title}_selector`}
       css={{
-        border: '1px solid $borderLight',
-        bg: '$surfaceLight',
+        border: '1px solid $border_bright',
+        bg: '$surface_bright',
         r: '$1',
         p: '$6 $9',
         zIndex: 10,
@@ -21,7 +21,7 @@ const DialogDropdownTrigger = React.forwardRef(({ title, css, open, icon, titleC
         css={{
           display: 'flex',
           justifyContent: 'space-between',
-          color: '$textHighEmp',
+          color: '$on_surface_high',
           w: '100%',
         }}
       >

package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts

@@ -0,0 +1,33 @@
+import type { Layout } from '@100mslive/types-prebuilt';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
+
+export const defaultLayout: Layout = {
+  id: '',
+  role_id: '',
+  template_id: '',
+  app_id: '',
+  typography: {
+    font_family: 'Inter',
+  },
+  themes: [],
+  options: {},
+  screens: {
+    preview: {
+      default: {
+        elements: {
+          preview_header: {
+            title: 'Get Started',
+            sub_title: 'Setup your audio and video before joining',
+          },
+          join_form: {
+            join_btn_type: JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE,
+            join_btn_label: 'Join Now',
+            go_live_btn_label: 'Go Live',
+          },
+        },
+      },
+    },
+    conferencing: {},
+    leave: {},
+  },
+};

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useFetchRoomLayout.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import type { GetResponse, Layout } from '@100mslive/types-prebuilt';
+import { defaultLayout } from '../constants';
+
+// TODO: remove this usage
+const fetchWithRetry = async (url = '', options = {}) => {
+  const MAX_RETRIES = 4;
+  let error = Error('something went wrong');
+  for (let i = 0; i < MAX_RETRIES; i++) {
+    try {
+      return await fetch(url, options);
+    } catch (err) {
+      error = err as Error;
+    }
+  }
+  console.error('Fetch failed after max retries', { url, options });
+  throw error;
+};
+
+// this should take endpoint and return
+export type useFetchRoomLayoutProps = {
+  endpoint?: string;
+  authToken: string;
+};
+
+export type useFetchRoomLayoutResponse = {
+  layout: Layout | undefined;
+};
+
+export const useFetchRoomLayout = ({
+  endpoint = '',
+  authToken = '',
+}: useFetchRoomLayoutProps): useFetchRoomLayoutResponse => {
+  const [layout, setLayout] = useState<Layout | undefined>(undefined);
+  const isFetchInProgress = useRef(false);
+  useEffect(() => {
+    (async () => {
+      if (isFetchInProgress.current || !authToken) {
+        return;
+      }
+      if (!endpoint) {
+        setLayout(defaultLayout);
+      }
+      isFetchInProgress.current = true;
+      const resp = await fetchWithRetry(endpoint, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+      const layoutResp: GetResponse = await resp.json();
+      setLayout(layoutResp.data[0]);
+      isFetchInProgress.current = false;
+    })();
+  }, [authToken, endpoint]);
+
+  return { layout };
+};

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Layout } from '@100mslive/types-prebuilt';
+import merge from 'lodash.merge';
+// @ts-ignore: fix types
+import { useAuthToken } from '../../components/AppData/useUISettings';
+import { useFetchRoomLayout } from './hooks/useFetchRoomLayout';
+
+export type RoomLayoutProviderProps = {
+  roomLayoutEndpoint?: string;
+  overrideLayout?: Layout;
+};
+
+export const RoomLayoutContext = React.createContext<Layout | undefined>(undefined);
+
+export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
+  children,
+  roomLayoutEndpoint,
+  overrideLayout,
+}) => {
+  const authToken: string = useAuthToken();
+  let { layout } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
+  layout = merge(layout, overrideLayout);
+  return <RoomLayoutContext.Provider value={layout}>{children}</RoomLayoutContext.Provider>;
+};
+
+export const useRoomLayout = (): Layout | undefined => React.useContext(RoomLayoutContext);

package/src/Progress/index.tsx

@@ -1,13 +1,13 @@
 import { Indicator, Root } from '@radix-ui/react-progress';
 import { styled } from '../Theme';
 
-const StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primaryDefault' });
+const StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primary_default' });
 
 const StyledRoot = styled(Root, {
   w: '100%',
   h: '$4',
   borderRadius: '$round',
-  backgroundColor: '$secondaryDark',
+  backgroundColor: '$secondary_dim',
   overflow: 'hidden',
 });
 

package/src/RadioGroup/RadioGroup.tsx

@@ -7,10 +7,10 @@ const RadioGroupRoot = styled(RadioGroupPrimitive.Root, {
 });
 
 const RadioGroupItem = styled(RadioGroupPrimitive.Item, {
-  bg: '$white',
+  bg: '$on_primary_high',
   width: '$8',
   height: '$8',
-  border: '1px solid $brandDefault',
+  border: '1px solid $primary_default',
   cursor: 'pointer',
   borderRadius: '$round',
   '&:focus': {
@@ -23,7 +23,7 @@ const RadioGroupItem = styled(RadioGroupPrimitive.Item, {
   },
 });
 const RadioGroupIndicator = styled(RadioGroupPrimitive.Indicator, {
-  bg: '$brandDefault',
+  bg: '$primary_default',
 });
 
 export const RadioGroup = {

package/src/ReactSelect/ReactSelect.stories.tsx

@@ -37,14 +37,14 @@ const data: {
 const Template: ComponentStory<typeof Select.Root> = () => {
   return (
     <Select.Root defaultValue="blueberry">
-      <Select.Trigger css={{ bg: '$bgSecondary' }}>
+      <Select.Trigger css={{ bg: '$background_dim' }}>
         <Select.Value />
-        <Flex css={{ color: '$textPrimary' }}>
+        <Flex css={{ color: '$on_primary_high' }}>
           <ChevronDownIcon />
         </Flex>
       </Select.Trigger>
       <Select.Content>
-        <Select.ScrollUpButton css={{ color: '$textPrimary' }}>
+        <Select.ScrollUpButton css={{ color: '$on_primary_high' }}>
           <ChevronUpIcon />
         </Select.ScrollUpButton>
         <Select.Viewport>
@@ -52,7 +52,7 @@ const Template: ComponentStory<typeof Select.Root> = () => {
             <>
               <Select.Group>
                 <Select.Label>
-                  <Text variant="xs" css={{ color: '$textSecondary' }}>
+                  <Text variant="xs" css={{ color: '$on_primary_medium' }}>
                     {item}
                   </Text>
                 </Select.Label>
@@ -61,17 +61,17 @@ const Template: ComponentStory<typeof Select.Root> = () => {
                     <Select.ItemText>
                       <Text variant="md">{type?.name}</Text>
                     </Select.ItemText>
-                    <Select.ItemIndicator css={{ color: '$textPrimary' }}>
+                    <Select.ItemIndicator css={{ color: '$on_primary_high' }}>
                       <CheckIcon />
                     </Select.ItemIndicator>
                   </Select.Item>
                 ))}
               </Select.Group>
-              {index < Object.keys(data).length - 1 && <Select.Separator css={{ bg: '$borderDefault' }} />}
+              {index < Object.keys(data).length - 1 && <Select.Separator css={{ bg: '$border_default' }} />}
             </>
           ))}
         </Select.Viewport>
-        <Select.ScrollDownButton css={{ color: '$textPrimary' }}>
+        <Select.ScrollDownButton css={{ color: '$on_primary_high' }}>
           <ChevronDownIcon />
         </Select.ScrollDownButton>
       </Select.Content>

package/src/ReactSelect/ReactSelect.tsx

@@ -12,8 +12,8 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   padding: '$8',
   lineHeight: '$px',
   gap: '$8',
-  backgroundColor: '$secondaryDefault',
-  color: '$white',
+  backgroundColor: '$secondary_default',
+  color: '$on_primary_high',
   fontSize: '$8',
   cursor: 'pointer',
   r: '$1',
@@ -21,7 +21,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
 
 const StyledContent = styled(SelectPrimitive.Content, {
   overflow: 'hidden',
-  backgroundColor: '$surfaceLight',
+  backgroundColor: '$surface_bright',
   r: '$1',
   h: '$80',
 });
@@ -45,12 +45,12 @@ const StyledItem = styled(SelectPrimitive.Item, {
 const StyledLabel = styled(SelectPrimitive.Label, {
   p: '$4 $8',
   lineHeight: '$10',
-  color: '$white',
+  color: '$on_primary_high',
 });
 
 const StyledSeparator = styled(SelectPrimitive.Separator, {
   height: '$px',
-  backgroundColor: '$white',
+  backgroundColor: '$on_primary_high',
   margin: '$4',
   opacity: 0.4,
 });
@@ -62,7 +62,7 @@ const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: '$white',
+  color: '$on_primary_high',
 });
 
 const scrollButtonStyles = {
@@ -70,8 +70,8 @@ const scrollButtonStyles = {
   alignItems: 'center',
   justifyContent: 'center',
   p: '$4',
-  backgroundColor: '$surfaceLight',
-  color: '$white',
+  backgroundColor: '$surface_bright',
+  color: '$on_primary_high',
   cursor: 'default',
 };
 

package/src/Select/Select.tsx

@@ -3,13 +3,13 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
 import { styled } from '../Theme';
 
 const Root = styled('div', {
-  color: '$textPrimary',
+  color: '$on_primary_high',
   display: 'inline-flex',
   position: 'relative',
   outline: 'none',
   overflow: 'hidden',
   borderRadius: '$1',
-  backgroundColor: '$menuBg',
+  backgroundColor: '$surface_default',
   maxWidth: '100%',
 });
 
@@ -21,15 +21,15 @@ const SelectRoot = styled('select', {
   lineHeight: 'inherit',
   textTransform: 'none',
   appearance: 'none',
-  color: '$textAccentHigh',
+  color: '$on_secondary_high',
   padding: '5px',
   paddingLeft: '12px',
   paddingRight: '30px',
   border: 'none',
   borderRadius: '8px',
-  backgroundColor: '$secondaryDefault',
+  backgroundColor: '$secondary_default',
   '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$brandDefault',
+    boxShadow: '0 0 0 3px $colors$primary_default',
   },
   '&[disabled]': {
     opacity: 0.5,
@@ -38,7 +38,7 @@ const SelectRoot = styled('select', {
 });
 
 const Arrow = styled('span', {
-  color: '$textAccentMedium',
+  color: '$on_secondary_high',
   width: '30px',
   height: '100%',
   position: 'absolute',

package/src/Slider/Slider.tsx

@@ -17,7 +17,7 @@ const Root = styled(BaseSlider.Root, {
 });
 
 const Track = styled(BaseSlider.Track, {
-  backgroundColor: '$secondaryGray',
+  backgroundColor: '$surface_bright',
   position: 'relative',
   flexGrow: 1,
   borderRadius: '$round',
@@ -27,7 +27,7 @@ const Track = styled(BaseSlider.Track, {
 
 const Range = styled(BaseSlider.Range, {
   position: 'absolute',
-  backgroundColor: '$primaryDefault',
+  backgroundColor: '$primary_default',
   borderRadius: '$round',
   height: '100%',
 });
@@ -37,11 +37,11 @@ const Thumb = styled(BaseSlider.Thumb, {
   display: 'block',
   width: '$8',
   height: '$8',
-  backgroundColor: '$primaryDefault',
+  backgroundColor: '$primary_default',
   cursor: 'pointer',
-  boxShadow: `0 2px 10px $colors$grayDefault`,
+  boxShadow: `0 2px 10px $colors$surface_default`,
   borderRadius: 10,
-  '&:hover': { backgroundColor: '$primaryDefault' },
+  '&:hover': { backgroundColor: '$primary_default' },
   '&:focus': { boxShadow: 'none' },
 });
 

package/src/Stats/Stats.tsx

@@ -120,7 +120,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
             value={formatBytes(audioTrackStats?.bitrate, 'b/s')}
           />
 
-          <StatsRow show={isNotNullish(downlinkScore)} label="Downlink" value={`${downlinkScore}`} />
+          <StatsRow show={isNotNullish(downlinkScore)} label="Downlink" value={downlinkScore} />
 
           <StatsRow show={isNotNullish(videoTrackStats?.codec)} label="Codec(V)" value={videoTrackStats?.codec} />
 
@@ -174,7 +174,17 @@ const TrackPacketsLostRow = ({
   );
 };
 
-const RawStatsRow = ({ label = '', value = '', tooltip = '', show = true }) => {
+const RawStatsRow = ({
+  label = '',
+  value = '',
+  tooltip = '',
+  show = true,
+}: {
+  label: string;
+  value?: string | number;
+  show?: boolean;
+  tooltip?: string;
+}) => {
   const statsLabel = <Stats.Label css={{ fontWeight: !value ? '$semiBold' : '$regular' }}>{label}</Stats.Label>;
 
   return (

package/src/Stats/StyledStats.tsx

@@ -1,7 +1,7 @@
 import { styled } from '../Theme';
 
 export const Root = styled('div', {
-  backgroundColor: '$statsBg',
+  backgroundColor: 'rgba(0,0,0,0.75)',
   position: 'absolute',
   top: '$3',
   left: '$3',
@@ -26,12 +26,12 @@ export const Row = styled('tr', {
 });
 
 export const Label = styled('td', {
-  color: '$textPrimary',
+  color: '$on_primary_high',
   fontWeight: '$regular',
 });
 
 export const Value = styled('td', {
-  color: '$textPrimary',
+  color: '$on_primary_high',
 });
 
 export const Gap = styled('tr', {

package/src/Switch/Switch.tsx

@@ -6,14 +6,14 @@ const SwitchRoot = styled(BaseSwitch.Root, {
   all: 'unset',
   width: '30px',
   height: '14px',
-  border: 'solid $space$px $secondaryDefault',
+  border: 'solid $space$px $secondary_default',
   borderRadius: '$3',
   p: '$2',
   position: 'relative',
   cursor: 'pointer',
   '&[data-state="checked"]': {
-    backgroundColor: '$primaryDefault',
-    border: 'solid $space$px $primaryDefault',
+    backgroundColor: '$primary_default',
+    border: 'solid $space$px $primary_default',
   },
   '&:focus': {
     outline: 'none',
@@ -30,14 +30,14 @@ const SwitchThumb = styled(BaseSwitch.Thumb, {
   position: 'absolute',
   width: '$md',
   height: '$md',
-  backgroundColor: '$secondaryDefault',
+  backgroundColor: '$secondary_default',
   borderRadius: '$round',
   transition: 'right 500ms ease-in',
   left: '$2',
   '&[data-state="checked"]': {
     left: 'unset',
     right: '$2',
-    backgroundColor: '$textAccentHigh',
+    backgroundColor: '$on_primary_high',
   },
 });
 

package/src/Tabs/Tabs.stories.tsx

@@ -52,13 +52,13 @@ const Template: ComponentStory<typeof Tabs.Root> = ({
     >
       <Tabs.List
         aria-label="tabs example"
-        css={{ bg: '$bgSecondary', r: '$1', '&[data-orientation="vertical"]': { flexDirection: 'column' } }}
+        css={{ bg: '$background_dim', r: '$1', '&[data-orientation="vertical"]': { flexDirection: 'column' } }}
       >
         <Tabs.Trigger value="tab1">One</Tabs.Trigger>
         <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
         <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
       </Tabs.List>
-      <Box css={{ r: '$1', bg: '$bgTertiary' }}>
+      <Box css={{ r: '$1', bg: '$surface_brighter' }}>
         <Tabs.Content value="tab1">
           <Text>Tab one content</Text>
         </Tabs.Content>

package/src/Tabs/Tabs.tsx

@@ -18,11 +18,11 @@ const StyledTrigger = styled(TabsPrimitive.Trigger, {
   alignItems: 'center',
   fontSize: '$sm',
   lineHeight: '$sm',
-  color: '$textHighEmp',
+  color: '$on_surface_high',
   userSelect: 'none',
   cursor: 'pointer',
   '&[data-state="active"]': {
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
     r: '$1',
   },
 });

package/src/Text/Text.tsx

@@ -129,12 +129,12 @@ export const Text = styled('p', {
   fontFamily: '$sans',
   fontWeight: '$regular',
   margin: 0,
-  color: '$textPrimary',
+  color: '$on_surface_high',
   variants: {
     variant: textVariants,
     color: {
       white: {
-        color: '$white',
+        color: '$on_surface_high',
       },
     },
     inline: {