Chore: Update color tokens (#27704)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com> Co-authored-by: dougfabris <devfabris@gmail.com>
RocketChat · Jan 20, 2023 · 64ad025 · 64ad025
1 parent c1142a5
commit 64ad025
Show file tree

Hide file tree

Showing 72 changed files with 192 additions and 221 deletions.
diff --git a/apps/meteor/client/components/BurgerMenu/BurgerBadge.stories.tsx b/apps/meteor/client/components/BurgerMenu/BurgerBadge.stories.tsx
@@ -13,7 +13,7 @@ export default {
 	},
 	decorators: [
 		(fn): ReactElement => (
-			<Box size={24} backgroundColor='neutral-500' position='relative'>
+			<Box size={24} backgroundColor='neutral' position='relative'>
 				{fn()}
 			</Box>
 		),

diff --git a/apps/meteor/client/components/Page/Page.tsx b/apps/meteor/client/components/Page/Page.tsx
@@ -1,20 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
-import Colors from '@rocket.chat/fuselage-tokens/colors';
 import type { ReactElement, ComponentProps } from 'react';
 import React, { useState } from 'react';
 
 import PageContext from './PageContext';
 
 type PageProps = Omit<ComponentProps<typeof Box>, 'backgroundColor'> & {
-	background?: 'light' | 'tint';
+	background?: 'light' | 'tint' | 'neutral';
 };
 
-const surfaceMap = {
-	light: Colors.white,
-	tint: Colors.n100,
-	neutral: Colors.n400,
-}; // TODO: Remove this export after the migration is complete
-
 const Page = ({ background = 'light', ...props }: PageProps): ReactElement => {
 	const [border, setBorder] = useState(false);
 	return (
@@ -28,8 +21,8 @@ const Page = ({ background = 'light', ...props }: PageProps): ReactElement => {
 				height='full'
 				overflow='hidden'
 				aria-labelledby='PageHeader-title'
+				bg={background}
 				{...props}
-				backgroundColor={`var(--rcx-color-surface-${background}, ${surfaceMap[background]})`}
 			/>
 		</PageContext.Provider>
 	);

diff --git a/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelAppSourceRoomIcon.tsx b/apps/meteor/client/components/RoomIcon/OmnichannelRoomIcon/OmnichannelAppSourceRoomIcon.tsx
@@ -7,10 +7,10 @@ import { AsyncStatePhase } from '../../../lib/asyncState/AsyncStatePhase';
 import { useOmnichannelRoomIcon } from './context/OmnichannelRoomIconContext';
 
 export const colors = {
-	busy: 'danger-500',
-	away: 'warning-600',
-	online: 'success-500',
-	offline: 'neutral-600',
+	busy: 'on-danger',
+	away: 'on-warning',
+	online: 'on-success',
+	offline: 'annotation',
 };
 
 const convertBoxSizeToNumber = (boxSize: ComponentProps<typeof Icon>['size']): number => {

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

diff --git a/apps/meteor/client/components/VerticalBar/VerticalBar.tsx b/apps/meteor/client/components/VerticalBar/VerticalBar.tsx
@@ -9,7 +9,7 @@ const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) =>
 	return (
 		<Box
 			rcx-vertical-bar
-			bg='light'
+			bg='room'
 			display='flex'
 			flexDirection='column'
 			flexShrink={0}

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 ? 'danger' : 'success'} {...props}>
+		<Box is='span' color={children < 0 ? 'on-danger' : '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
@@ -99,11 +99,9 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 	const messageBodyAdditionalStyles = css`
 		> blockquote {
 			padding-inline: 8px;
+			border: 1px solid ${Palette.stroke['stroke-extra-light']};
 			border-radius: 2px;
-			border-width: 1px;
-			border-style: solid;
 			background-color: ${Palette.surface['surface-tint']};
-			border-color: ${Palette.stroke['stroke-extra-light']};
 			border-inline-start-color: ${Palette.stroke['stroke-medium']};
 
 			&:hover,
@@ -126,6 +124,16 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 			margin-inline-start: 0;
 			padding-inline-start: 0;
 		}
+		a {
+			color: ${Palette.statusColor['status-font-on-info']};
+			&:hover {
+				text-decoration: underline;
+			}
+			&:focus {
+				border: 2px solid ${Palette.stroke['stroke-extra-light-highlight']};
+				border-radius: 2px;
+			}
+		}
 	`;
 
 	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);

diff --git a/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx b/apps/meteor/client/components/message/content/attachments/structure/image/Retry.tsx
@@ -22,7 +22,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 	return (
 		<ImageBox className={clickable} onClick={retry} size={160}>
 			<Icon name='refresh' color='hint' size='x64' />
-			<Box fontScale='h2' color='default'>
+			<Box fontScale='h3' color='default' textAlign='center'>
 				{t('Retry')}
 			</Box>
 		</ImageBox>

diff --git a/apps/meteor/client/components/modal/ModalBackdrop.tsx b/apps/meteor/client/components/modal/ModalBackdrop.tsx
@@ -94,7 +94,6 @@ const ModalBackdrop = ({ children, onDismiss }: ModalBackdropProps): ReactElemen
 			inset={0}
 			display='flex'
 			flexDirection='column'
-			backgroundColor='neutral-900-65'
 			onMouseDown={onMouseDown}
 			onMouseUp={onMouseUp}
 		/>

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

diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
@@ -16,7 +16,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
+			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),

diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
@@ -15,7 +15,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
+			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),

diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
@@ -16,7 +16,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
+			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),

diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.stories.tsx
@@ -67,7 +67,7 @@ const VoipFooterTemplate: ComponentStory<typeof VoipFooter> = (args) => {
 	};
 
 	return (
-		<Box maxWidth='x300' bg='neutral-800' borderRadius='x4'>
+		<Box maxWidth='x300' bg='dark' borderRadius='x4'>
 			<VoipFooter
 				{...args}
 				callActions={callActions}

diff --git a/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx b/apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx
@@ -87,7 +87,7 @@ export const VoipFooter = ({
 					{callsInQueue}
 				</Box>
 				<Box display='flex' flexDirection='row' h='24px' mi='16px' mbs='12px' mbe='8px' justifyContent='space-between' alignItems='center'>
-					<Box color='neutral-500' fontScale='c2' withTruncatedText>
+					<Box color='disabled' fontScale='c2' withTruncatedText>
 						{title}
 					</Box>
 					{(callerState === 'IN_CALL' || callerState === 'ON_HOLD') && (
@@ -111,7 +111,7 @@ export const VoipFooter = ({
 								color={paused ? 'disabled' : 'hint'}
 								onClick={handleHold}
 							/>
-							{options && <Menu color='neutral-500' data-tooltip={t('More_options')} options={options} />}
+							{options && <Menu color='disabled' data-tooltip={t('More_options')} options={options} />}
 						</ButtonGroup>
 					)}
 				</Box>

diff --git a/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx b/apps/meteor/client/sidebar/header/CreateChannel/CreateChannelModal.tsx
@@ -164,13 +164,12 @@ const CreateChannelModal = ({ teamId = '', onClose }: CreateChannelModalProps):
 				<Modal.Title>{t('Create_channel')}</Modal.Title>
 				<Modal.Close title={t('Close')} onClick={onClose} />
 			</Modal.Header>
-			<Modal.Content>
+			<Modal.Content mbe='x2'>
 				<FieldGroup>
 					<Field>
 						<Field.Label>{t('Name')}</Field.Label>
 						<Field.Row>
 							<TextInput
-								autoFocus
 								data-qa-type='channel-name-input'
 								{...register('name', {
 									required: t('error-the-field-is-required', { field: t('Name') }),
@@ -305,6 +304,7 @@ const CreateChannelModal = ({ teamId = '', onClose }: CreateChannelModalProps):
 					</Field>
 				</FieldGroup>
 			</Modal.Content>
+
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>

diff --git a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx b/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx
@@ -40,7 +40,7 @@ const CreateDirectMessage: FC<CreateDirectMessageProps> = ({ onClose }) => {
 				<Modal.Title>{t('Direct_Messages')}</Modal.Title>
 				<Modal.Close onClick={onClose} />
 			</Modal.Header>
-			<Modal.Content>
+			<Modal.Content mbe='x2'>
 				<Box>{t('Direct_message_creation_description')}</Box>
 				<Box mbs='x16' display='flex' flexDirection='column' width='full'>
 					<UserAutoCompleteMultipleFederated value={users} onChange={setUsers} />

diff --git a/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx b/apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx
@@ -128,13 +128,12 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 				<Modal.Title>{t('Teams_New_Title')}</Modal.Title>
 				<Modal.Close title={t('Close')} onClick={onClose} />
 			</Modal.Header>
-			<Modal.Content>
+			<Modal.Content mbe='x2'>
 				<FieldGroup>
 					<Field>
 						<Field.Label>{t('Teams_New_Name_Label')}</Field.Label>
 						<Field.Row>
 							<TextInput
-								autoFocus
 								aria-invalid={errors.name ? 'true' : 'false'}
 								{...register('name', {
 									required: t('error-the-field-is-required', { field: t('Name') }),

diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx
@@ -25,7 +25,7 @@ export const OmnichannelLivechatToggle = (props: Omit<ComponentProps<typeof Side
 			{...props}
 			id={'omnichannel-status-toggle'}
 			data-tooltip={agentAvailable ? t('Turn_off_answer_chats') : t('Turn_on_answer_chats')}
-			color={agentAvailable ? 'success' : undefined}
+			color={agentAvailable ? 'on-success' : undefined}
 			icon={agentAvailable ? 'message' : 'message-disabled'}
 			onClick={handleAvailableStatusChange}
 		/>

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='success' name='circle-check' />
+				<Modal.Icon color='on-success' name='circle-check' />
 				<Modal.Title>{title}</Modal.Title>
 				<Modal.Close onClick={onCancel} />
 			</Modal.Header>

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

diff --git a/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx b/apps/meteor/client/views/admin/apps/AppUpdateModal.tsx
@@ -26,7 +26,7 @@ const AppUpdateModal: FC<AppUpdateModalProps> = ({ confirm, cancel, ...props })
 	return (
 		<Modal {...props}>
 			<Modal.Header>
-				<Modal.Icon color='danger' name='info-circled' />
+				<Modal.Icon color='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/admin/apps/components/AppPermissionsList.tsx b/apps/meteor/client/views/admin/apps/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='danger'>
+							<Box is='span' color='on-danger'>
 								({t('required')})
 							</Box>
 						)}

diff --git a/apps/meteor/client/views/admin/apps/components/ScreenshotCarousel.tsx b/apps/meteor/client/views/admin/apps/components/ScreenshotCarousel.tsx
@@ -1,6 +1,5 @@
 import type { AppScreenshot } from '@rocket.chat/core-typings';
-import { Box, Button, Icon } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Box, IconButton } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -48,46 +47,28 @@ const ScreenshotCarousel = ({
 
 	return (
 		<>
-			<Box position='fixed' w='100%' h='100vh' bg={colors.n800} opacity='0.7' zIndex='2' marginBlock='-0.75px' />
+			<Box position='fixed' w='100%' h='100vh' bg='font-pure-black' opacity='0.7' marginBlock='-0.75px' zIndex='2' />
 
 			{!isFirstSlide && (
-				<Button
+				<IconButton
+					secondary
+					icon='chevron-right'
 					onClick={handlePrevSlide}
-					display='flex'
-					alignItems='center'
-					justifyContent='center'
 					style={{ top: '50%', left: '10px', cursor: 'pointer', transform: 'translateY(-50%)' }}
 					position='absolute'
 					zIndex={3}
-					borderRadius='x2'
-					w='x28'
-					h='x28'
-					margin='0'
-					bg={colors.n600}
-					borderColor={colors.n600}
-				>
-					<Icon name='chevron-right' size='x24' color='alternative' />
-				</Button>
+				/>
 			)}
 
 			{!isLastSlide && (
-				<Button
+				<IconButton
+					secondary
+					icon='chevron-left'
 					onClick={handleNextSlide}
-					display='flex'
-					alignItems='center'
-					justifyContent='center'
 					style={{ top: '50%', right: '10px', cursor: 'pointer', transform: 'translateY(-50%)' }}
 					position='absolute'
 					zIndex={3}
-					borderRadius='x2'
-					w='x28'
-					h='x28'
-					margin='0'
-					bg={colors.n600}
-					borderColor={colors.n600}
-				>
-					<Icon name='chevron-left' size='x24' color='alternative' />
-				</Button>
+				/>
 			)}
 
 			<Box

diff --git a/apps/meteor/client/views/admin/cloud/CopyStep.tsx b/apps/meteor/client/views/admin/cloud/CopyStep.tsx
@@ -51,9 +51,9 @@ const CopyStep: FC<CopyStepProps> = ({ onNextButtonClick }) => {
 				<Box withRichContent>
 					<p>{t('Cloud_register_offline_helper')}</p>
 				</Box>
-				<Box display='flex' flexDirection='column' alignItems='stretch' padding='x16' flexGrow={1} backgroundColor='neutral-800'>
+				<Box display='flex' flexDirection='column' alignItems='stretch' padding='x16' flexGrow={1} backgroundColor='dark'>
 					<Scrollable vertical>
-						<Box height='x108' fontFamily='mono' fontScale='p2' color='alternative' style={{ wordBreak: 'break-all' }}>
+						<Box height='x108' fontFamily='mono' fontScale='p2' color='white' style={{ wordBreak: 'break-all' }}>
 							{clientKey}
 						</Box>
 					</Scrollable>

diff --git a/apps/meteor/client/views/admin/cloud/PasteStep.tsx b/apps/meteor/client/views/admin/cloud/PasteStep.tsx
@@ -44,14 +44,14 @@ const PasteStep: FC<PasteStepProps> = ({ onBackButtonClick, onFinish }) => {
 				<Box withRichContent>
 					<p>{t('Cloud_register_offline_finish_helper')}</p>
 				</Box>
-				<Box display='flex' flexDirection='column' alignItems='stretch' padding='x16' flexGrow={1} backgroundColor='neutral-800'>
+				<Box display='flex' flexDirection='column' alignItems='stretch' padding='x16' flexGrow={1} backgroundColor='dark'>
 					<Scrollable vertical>
 						<Box
 							is='textarea'
 							height='x108'
 							fontFamily='mono'
 							fontScale='p2'
-							color='alternative'
+							color='white'
 							style={{ wordBreak: 'break-all', resize: 'none' }}
 							placeholder={t('Paste_here')}
 							disabled={isLoading}