replace deprecated color tokens (#28164)

RocketChat · Feb 27, 2023 · 7b76376 · 7b76376
1 parent 1ecde12
commit 7b76376
Show file tree

Hide file tree

Showing 29 changed files with 43 additions and 39 deletions.
diff --git a/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelAppSourceRoomIcon.tsx b/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelAppSourceRoomIcon.tsx
@@ -7,9 +7,9 @@ import { AsyncStatePhase } from '../../../lib/asyncState/AsyncStatePhase';
 import { useOmnichannelRoomIcon } from './context/OmnichannelRoomIconContext';
 
 export const colors = {
-	busy: 'on-danger',
-	away: 'on-warning',
-	online: 'on-success',
+	busy: 'status-font-on-danger',
+	away: 'status-font-on-warning',
+	online: 'status-font-on-success',
 	offline: 'annotation',
 };
 

diff --git a/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelCoreSourceRoomIcon.tsx b/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelCoreSourceRoomIcon.tsx
@@ -4,9 +4,9 @@ import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
 const colors = {
-	busy: 'on-danger',
-	away: 'on-warning',
-	online: 'on-success',
+	busy: 'status-font-on-danger',
+	away: 'status-font-on-warning',
+	online: 'status-font-on-success',
 	offline: 'annotation',
 };
 

diff --git a/apps/meteor/client/components/dataView/Growth.tsx b/apps/meteor/client/components/dataView/Growth.tsx
@@ -15,7 +15,7 @@ const Growth = ({ children, ...props }: GrowthProps): ReactElement | null => {
 	}
 
 	return (
-		<Box is='span' color={children < 0 ? 'on-danger' : 'on-success'} {...props}>
+		<Box is='span' color={children < 0 ? 'status-font-on-danger' : 'status-font-on-success'} {...props}>
 			{children < 0 ? <NegativeGrowthSymbol /> : <PositiveGrowthSymbol />}
 			{String(Math.abs(children))}
 		</Box>

diff --git a/apps/meteor/client/components/message/MessageContentBody.tsx b/apps/meteor/client/components/message/MessageContentBody.tsx
@@ -136,7 +136,7 @@ const MessageContentBody = ({ mentions, channels, md, searchText }: MessageConte
 			padding-inline-start: 0;
 		}
 		a {
-			color: ${Palette.statusColor['status-font-on-info']};
+			color: ${Palette.text['font-info']};
 			&:hover {
 				text-decoration: underline;
 			}

diff --git a/apps/meteor/client/components/message/ReadReceiptIndicator.tsx b/apps/meteor/client/components/message/ReadReceiptIndicator.tsx
@@ -8,7 +8,7 @@ type ReadReceiptIndicatorProps = {
 
 const ReadReceiptIndicator = ({ unread }: ReadReceiptIndicatorProps): ReactElement | null => (
 	<Box position='absolute' insetBlockStart={2} insetInlineEnd={8}>
-		<Icon name='check' size='x16' color={unread ? 'annotation' : 'on-info'} />
+		<Icon name='check' size='x16' color={unread ? 'annotation' : 'info'} />
 	</Box>
 );
 

diff --git a/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx b/apps/meteor/client/components/message/variants/ThreadMessagePreview.tsx
@@ -79,7 +79,7 @@ const ThreadMessagePreview = ({ message, sequential, ...props }: ThreadMessagePr
 									{translated && (
 										<>
 											{' '}
-											<MessageStatusIndicatorItem name='language' color='font-on-info' title={t('Translated')} />
+											<MessageStatusIndicatorItem name='language' color='info' title={t('Translated')} />
 										</>
 									)}
 								</>

diff --git a/apps/meteor/client/hooks/useRoomIcon.tsx b/apps/meteor/client/hooks/useRoomIcon.tsx
@@ -7,9 +7,9 @@ import React from 'react';
 import { ReactiveUserStatus } from '../components/UserStatus';
 
 export const colors = {
-	busy: 'on-danger',
-	away: 'on-warning',
-	online: 'on-success',
+	busy: 'status-font-on-danger',
+	away: 'status-font-on-warning',
+	online: 'status-font-on-success',
 	offline: 'annotation',
 };
 

diff --git a/apps/meteor/client/sidebar/header/UserDropdown.tsx b/apps/meteor/client/sidebar/header/UserDropdown.tsx
@@ -118,7 +118,7 @@ const UserDropdown = ({ user, onClose }: UserDropdownProps): ReactElement => {
 			{presenceDisabled && (
 				<Box fontScale='p2' mi='x12' mb='x4'>
 					<Box mbe='x4'>{t('User_status_disabled')}</Box>
-					<Box is='a' color='status-font-on-info' onClick={handleStatusDisabledModal}>
+					<Box is='a' color='info' onClick={handleStatusDisabledModal}>
 						{t('Learn_more')}
 					</Box>
 				</Box>

diff --git a/apps/meteor/client/views/account/preferences/MyDataModal.tsx b/apps/meteor/client/views/account/preferences/MyDataModal.tsx
@@ -15,7 +15,7 @@ const MyDataModal: FC<MyDataModalProps> = ({ onCancel, title, text, ...props })
 	return (
 		<Modal {...props}>
 			<Modal.Header>
-				<Modal.Icon color='on-success' name='circle-check' />
+				<Modal.Icon color='status-font-on-success' name='circle-check' />
 				<Modal.Title>{title}</Modal.Title>
 				<Modal.Close onClick={onCancel} />
 			</Modal.Header>

diff --git a/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx b/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx
@@ -18,7 +18,11 @@ const useOverviewData = (): [eventCount: ReactNode, userCount: ReactNode, server
 	}
 
 	if (result.isError) {
-		return [<Box color='on-danger'>Error</Box>, <Box color='on-danger'>Error</Box>, <Box color='on-danger'>Error</Box>];
+		return [
+			<Box color='status-font-on-danger'>Error</Box>,
+			<Box color='status-font-on-danger'>Error</Box>,
+			<Box color='status-font-on-danger'>Error</Box>,
+		];
 	}
 
 	const { data } = result.data;

diff --git a/apps/meteor/client/views/admin/viewLogs/ServerLogs.tsx b/apps/meteor/client/views/admin/viewLogs/ServerLogs.tsx
@@ -198,7 +198,7 @@ const ServerLogs = (): ReactElement => {
 				paddingBlock='x8'
 				fontScale='c1'
 				borderRadius='full'
-				color='on-info'
+				color='info'
 				backgroundColor='surface'
 				onClick={handleClick}
 				textAlign='center'

diff --git a/apps/meteor/client/views/marketplace/AppMenu.js b/apps/meteor/client/views/marketplace/AppMenu.js
@@ -393,7 +393,7 @@ function AppMenu({ app, isAppDetailsPage, ...props }) {
 				isAppEnabled && {
 					disable: {
 						label: (
-							<Box color='on-warning'>
+							<Box color='status-font-on-warning'>
 								<Icon name='ban' size='x16' marginInlineEnd='x4' />
 								{t('Disable')}
 							</Box>
@@ -425,7 +425,7 @@ function AppMenu({ app, isAppDetailsPage, ...props }) {
 				isAdminUser && {
 					uninstall: {
 						label: (
-							<Box color='on-danger'>
+							<Box color='status-font-on-danger'>
 								<Icon name='trash' size='x16' marginInlineEnd='x4' />
 								{t('Uninstall')}
 							</Box>

diff --git a/apps/meteor/client/views/marketplace/AppUpdateModal.tsx b/apps/meteor/client/views/marketplace/AppUpdateModal.tsx
@@ -26,7 +26,7 @@ const AppUpdateModal: FC<AppUpdateModalProps> = ({ confirm, cancel, ...props })
 	return (
 		<Modal {...props}>
 			<Modal.Header>
-				<Modal.Icon color='on-danger' name='info-circled' />
+				<Modal.Icon color='status-font-on-danger' name='info-circled' />
 				<Modal.Title>{t('Apps_Manual_Update_Modal_Title')}</Modal.Title>
 				<Modal.Close onClick={handleCloseButtonClick} />
 			</Modal.Header>

diff --git a/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx b/apps/meteor/client/views/marketplace/components/AppPermissionsList.tsx
@@ -46,7 +46,7 @@ const AppPermissionsList = ({ appPermissions }: { appPermissions: AppPermission[
 					<Fragment key={permission.name}>
 						<li>{handleAppPermissions(permission.name)}</li>
 						{permission.required && (
-							<Box is='span' color='on-danger'>
+							<Box is='span' color='status-font-on-danger'>
 								({t('required')})
 							</Box>
 						)}

diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
@@ -27,7 +27,7 @@ const CategoryDropDownAnchor = forwardRef<HTMLInputElement, { selectedCategories
 						bg='light'
 						fontWeight={700}
 						fontSize='micro'
-						color='on-info'
+						color='info'
 						pi='x6'
 						display='flex'
 						alignItems='center'

diff --git a/apps/meteor/client/views/omnichannel/currentChats/RemoveAllClosed.tsx b/apps/meteor/client/views/omnichannel/currentChats/RemoveAllClosed.tsx
@@ -26,7 +26,7 @@ const RemoveAllClosed: FC<{
 		...(canRemove && {
 			removeClosed: {
 				label: (
-					<Box color='on-danger' data-qa='current-chats-options-removeAllClosed'>
+					<Box color='status-font-on-danger' data-qa='current-chats-options-removeAllClosed'>
 						<Icon name='trash' size='x16' marginInlineEnd='x4' />
 						{t('Delete_all_closed_chats')}
 					</Box>

diff --git a/apps/meteor/client/views/room/Header/icons/Translate.tsx b/apps/meteor/client/views/room/Header/icons/Translate.tsx
@@ -13,7 +13,7 @@ const Translate: FC<TranslateProps> = ({ room: { autoTranslateLanguage, autoTran
 	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled');
 	const encryptedLabel = t('Translated');
 	return autoTranslateEnabled && autoTranslate && autoTranslateLanguage ? (
-		<Header.State title={encryptedLabel} icon='language' color='on-info' />
+		<Header.State title={encryptedLabel} icon='language' color='info' />
 	) : null;
 };
 

diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/MenuItem.js b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/MenuItem.js
@@ -25,7 +25,7 @@ const MenuItem = ({ _id, name, url, onClickDelete }) => {
 		...(onClickDelete && {
 			delete: {
 				label: (
-					<Box display='flex' alignItems='center' color='on-danger'>
+					<Box display='flex' alignItems='center' color='status-font-on-danger'>
 						<Icon mie='x4' name='trash' size='x16' />
 						{t('Delete')}
 					</Box>

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -89,7 +89,7 @@ export const useRemoveUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 			roomCanRemove && userCanRemove
 				? {
 						label: (
-							<Box color='on-danger'>
+							<Box color='status-font-on-danger'>
 								<Icon mie='x4' name='cross' size='x20' />
 								{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
 							</Box>

diff --git a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx
@@ -25,7 +25,7 @@ const ChannelDesertionTableRow = ({ room, onChange, selected, lastOwnerWarning }
 				<Margins inline='x8'>
 					<Icon name={room.t === 'p' ? 'hashtag-lock' : 'hashtag'} />
 					{fname ?? name}
-					{isLastOwner && <Icon size='x16' name='info-circled' color='on-danger' title={lastOwnerWarning} />}
+					{isLastOwner && <Icon size='x16' name='info-circled' color='status-font-on-danger' title={lastOwnerWarning} />}
 				</Margins>
 			</TableCell>
 			<TableCell align='end' withTruncatedText>

diff --git a/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/SecondStep.tsx b/apps/meteor/client/views/teams/ConvertToChannelModal/ModalSteps/SecondStep.tsx
@@ -23,7 +23,7 @@ const SecondStep: FC<SecondStepsProps> = ({ onClose, onCancel, onConfirm, delete
 		<GenericModal
 			{...props}
 			variant='warning'
-			icon={<Icon name='modal-warning' size={24} color='on-warning' />}
+			icon={<Icon name='modal-warning' size={24} color='status-font-on-warning' />}
 			cancelText={rooms?.length > 0 ? t('Back') : t('Cancel')}
 			confirmText={t('Convert')}
 			title={t('Confirmation')}

diff --git a/.../meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx b/.../meteor/client/views/teams/contextualBar/channels/ConfirmationModal/ConfirmationModal.tsx
@@ -21,7 +21,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmActio
 	return (
 		<Modal>
 			<Modal.Header>
-				<Modal.Icon name='modal-warning' color='on-warning'></Modal.Icon>
+				<Modal.Icon name='modal-warning' color='status-font-on-warning'></Modal.Icon>
 				<Modal.Title>{t('Confirmation')}</Modal.Title>
 				<Modal.Close onClick={onClose} />
 			</Modal.Header>

diff --git a/apps/meteor/client/views/teams/contextualBar/channels/RoomActions.js b/apps/meteor/client/views/teams/contextualBar/channels/RoomActions.js
@@ -67,7 +67,7 @@ const RoomActions = ({ room, reload }) => {
 		labelButton: t('Delete'),
 		content: (
 			<>
-				<Box is='span' size='14px' color='on-danger' fontWeight='600'>
+				<Box is='span' size='14px' color='status-font-on-danger' fontWeight='600'>
 					{t('Team_Delete_Channel_modal_content_danger')}
 				</Box>
 				<Box is='span' size='14px'>
@@ -141,7 +141,7 @@ const RoomActions = ({ room, reload }) => {
 						<CheckBox checked={room.teamDefault} />
 					</Option>
 				) : (
-					<Box color='on-danger'>
+					<Box color='status-font-on-danger'>
 						<Option {...props} label={label} icon={icon} />
 					</Box>
 				)

diff --git a/apps/meteor/client/views/teams/contextualBar/info/Delete/StepOne.js b/apps/meteor/client/views/teams/contextualBar/info/Delete/StepOne.js
@@ -27,7 +27,7 @@ export const StepTwo = ({
 			confirmText={t('Continue')}
 		>
 			<Box withRichContent mbe='x16'>
-				<Box is='span' color='on-danger' fontWeight='bold'>
+				<Box is='span' color='status-font-on-danger' fontWeight='bold'>
 					{t('Team_Delete_Channel_modal_content_danger')}
 				</Box>{' '}
 				{t('Teams_delete_team_Warning')}

diff --git a/...meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersSecondStep.js b/...meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersSecondStep.js
@@ -10,7 +10,7 @@ const RemoveUsersSecondStep = ({ onClose, onCancel, onConfirm, deletedRooms = {}
 	return (
 		<GenericModal
 			variant='danger'
-			icon={<Icon name='modal-warning' size={24} color='on-warning' />}
+			icon={<Icon name='modal-warning' size={24} color='status-font-on-warning' />}
 			cancelText={rooms?.length > 0 ? t('Back') : t('Cancel')}
 			confirmText={t('Remove')}
 			title={t('Confirmation')}

diff --git a/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx b/apps/meteor/ee/client/omnichannel/cannedResponses/components/cannedResponseForm.tsx
@@ -50,7 +50,7 @@ const CannedResponseForm: FC<{
 				<Field.Label w='full'>
 					<Box w='full' display='flex' flexDirection='row' justifyContent='space-between'>
 						{t('Message')}
-						<Box className={clickable} color='on-info' onClick={onPreview}>
+						<Box className={clickable} color='info' onClick={onPreview}>
 							{previewState ? t('Editor') : t('Preview')}
 						</Box>
 					</Box>

diff --git a/apps/meteor/ee/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx b/apps/meteor/ee/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx
@@ -18,15 +18,15 @@ const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps): ReactElement =>
 	return (
 		<Box display='flex' flexDirection='column' minWidth='x180'>
 			<Box
-				color={reachedLimit ? 'on-danger' : 'default'}
+				color={reachedLimit ? 'status-font-on-danger' : 'default'}
 				display='flex'
 				flexDirection='row'
 				justifyContent='space-between'
 				fontScale='c1'
 				mb='x8'
 			>
 				<div role='status'>{t('Seats_Available', { seatsLeft })}</div>
-				<Box color={reachedLimit ? 'on-danger' : 'hint'}>{`${members}/${limit}`}</Box>
+				<Box color={reachedLimit ? 'status-font-on-danger' : 'hint'}>{`${members}/${limit}`}</Box>
 			</Box>
 			<ProgressBar percentage={percentage} variant={closeToLimit ? 'danger' : 'success'} />
 		</Box>

diff --git a/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx b/apps/meteor/ee/client/voip/modals/DeviceSettingsModal.tsx
@@ -64,15 +64,15 @@ const DeviceSettingsModal = (): ReactElement => {
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>
 				{!setSinkIdAvailable && (
-					<Box color='on-danger' display='flex' flexDirection='column'>
+					<Box color='status-font-on-danger' display='flex' flexDirection='column'>
 						{t('Device_Changes_Not_Available')}
 						<Box is='a' href='https://rocket.chat/download' target='_blank' rel='noopener noreferrer'>
 							{t('Download_Destkop_App')}
 						</Box>
 					</Box>
 				)}
 				{!isDeviceManagementEnabled && (
-					<Box color='on-danger' display='flex' flexDirection='column'>
+					<Box color='status-font-on-danger' display='flex' flexDirection='column'>
 						{t('Device_Changes_Not_Available_Insecure_Context')}
 					</Box>
 				)}

diff --git a/packages/livechat/src/components/Composer/stories.js b/packages/livechat/src/components/Composer/stories.js
@@ -71,7 +71,7 @@ storiesOf('Components/Composer', module)
 						<SmileIcon width='20' />
 					</ComposerAction>
 					<ComposerAction text='Send' onClick={action('click send')}>
-						<SendIcon color='on-info' width='20' />
+						<SendIcon color='info' width='20' />
 					</ComposerAction>
 				</ComposerActions>
 			}
-Original file line number
+Diff line change
@@ Expand Up @@
     									{translated && (
     										<>
     											{' '}
-    											<MessageStatusIndicatorItem name='language' color='font-on-info' title={t('Translated')} />
+    											<MessageStatusIndicatorItem name='language' color='info' title={t('Translated')} />
     										</>
     									)}
     								</>
@@ Expand Down @@