Chore: Apply correct fuselage color tokens

apps/meteor/app/theme/client/imports/general/theme_old.css

@@ -281,12 +281,6 @@ textarea {
 	background-color: var(--success-background);
 }
 
-.messages-container {
-	.footer {
-		background: var(--content-background-color);
-	}
-}
-
 .message.editing {
 	background-color: var(--message-box-editing-color);
 }

apps/meteor/client/components/GenericTable/GenericTable.tsx

@@ -73,7 +73,7 @@ const GenericTable = forwardRef(function GenericTable<
 				? renderFilter({ ...props, onChange: setFilter } as any) // TODO: ugh
 				: null}
 			{results && !results.length ? (
-				<Tile fontScale='p2' elevation='0' color='info' textAlign='center'>
+				<Tile fontScale='p2' elevation='0' color='hint' textAlign='center'>
 					{t('No_data_found')}
 				</Tile>
 			) : (

apps/meteor/client/components/GenericTable/NoResults.tsx

@@ -28,7 +28,7 @@ const NoResults: FC<NoResultsProps> = ({ icon, title, description, buttonTitle,
 		<Box is='h2' fontScale='h2' flexGrow={1}>
 			{title}
 		</Box>
-		<Tile paddingBlockStart='x5' fontScale='p2' elevation='0' color='info' textAlign='center'>
+		<Tile paddingBlockStart='x5' fontScale='p2' elevation='0' color='hint' textAlign='center'>
 			<Box margin='auto' maxWidth='400px'>
 				{description}
 			</Box>

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -87,7 +87,7 @@ const CloseChatModal = ({
 				<Modal.Close onClick={onCancel} />
 			</Modal.Header>
 			<Modal.Content fontScale='p2'>
-				<Box color='neutral-600'>{t('Close_room_description')}</Box>
+				<Box color='annotation'>{t('Close_room_description')}</Box>
 				<Field marginBlock='x15'>
 					<Field.Label required={commentRequired}>{t('Comment')}</Field.Label>
 					<Field.Row>

apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx

@@ -138,7 +138,7 @@ const ForwardChatModal = ({
 				<Field marginBlock='x15'>
 					<Field.Label>
 						{t('Leave_a_comment')}{' '}
-						<Box is='span' color='neutral-600'>
+						<Box is='span' color='annotation'>
 							({t('Optional')})
 						</Box>
 					</Field.Label>

apps/meteor/client/components/Page/PageBlockWithBorder.tsx

@@ -11,7 +11,7 @@ const PageBlockWithBorder = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
 			{...props}
 			pb='x16'
 			ref={ref}
-			borderBlockEndColor={border ? 'neutral-200' : 'transparent'}
+			borderBlockEndColor={border ? 'extra-light' : 'transparent'}
 			borderBlockEndWidth='x2'
 			height='auto'
 		/>

apps/meteor/client/components/Page/PageHeader.tsx

@@ -18,7 +18,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 	const { isMobile } = useLayout();
 
 	return (
-		<Box borderBlockEndWidth='x2' borderBlockEndColor={borderBlockEndColor ?? border ? 'neutral-200' : 'transparent'} {...props}>
+		<Box borderBlockEndWidth='x2' borderBlockEndColor={borderBlockEndColor ?? border ? 'extra-light' : 'transparent'} {...props}>
 			<Box
 				marginBlock='x16'
 				marginInline='x24'
@@ -27,7 +27,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 				flexDirection='row'
 				flexWrap='nowrap'
 				alignItems='center'
-				color='neutral-800'
+				color='default'
 				{...props}
 			>
 				{isMobile && (

apps/meteor/client/components/Sidebar/Header.tsx

@@ -11,7 +11,7 @@ const Header: FC<HeaderProps> = ({ title, onClose, children, ...props }) => (
 		{(title || onClose) && (
 			<Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>
 				{title && (
-					<Box color='neutral-800' fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
+					<Box color='default' fontSize='p2' fontWeight='p2' flexShrink={1} withTruncatedText>
 						{title}
 					</Box>
 				)}

apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx

@@ -33,7 +33,7 @@ const SidebarNavigationItem: FC<SidebarNavigationItemProps> = ({
 	return (
 		<SidebarGenericItem active={isActive} href={path} key={path}>
 			{icon && <Icon name={icon} size='x20' mi='x4' />}
-			<Box withTruncatedText fontScale='p2' mi='x4' color='info'>
+			<Box withTruncatedText fontScale='p2' mi='x4' color='hint'>
 				{label} {tag && <Tag style={{ display: 'inline', backgroundColor: '#000', color: '#FFF', marginLeft: 4 }}>{tag}</Tag>}
 			</Box>
 		</SidebarGenericItem>

apps/meteor/client/components/VerticalBar/VerticalBar.tsx

@@ -8,13 +8,13 @@ const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) =>
 	return (
 		<Box
 			rcx-vertical-bar
-			backgroundColor='surface'
+			bg='light'
 			display='flex'
 			flexDirection='column'
 			flexShrink={0}
 			width={sizes.contextualBar}
 			borderInlineStartWidth='2px'
-			borderInlineStartColor='neutral-300'
+			borderInlineStartColor='extra-light'
 			borderInlineStartStyle='solid'
 			height='full'
 			position={position}

apps/meteor/client/components/VerticalBar/VerticalBarHeader.tsx

@@ -10,7 +10,7 @@ const VerticalBarHeader: FC<{ children: ReactNode; props?: ComponentProps<typeof
 		is='h3'
 		pi='x24'
 		borderBlockEndWidth='x2'
-		borderBlockColor='neutral-200'
+		borderBlockColor='extra-light'
 		{...props}
 	>
 		<Box
@@ -21,7 +21,7 @@ const VerticalBarHeader: FC<{ children: ReactNode; props?: ComponentProps<typeof
 			fontScale='h4'
 			flexGrow={1}
 			overflow='hidden'
-			color='neutral-800'
+			color='default'
 		>
 			<Margins inline='x4'>{children}</Margins>
 		</Box>

apps/meteor/client/components/message/Attachments/Attachment/AttachmentBlock.tsx

@@ -5,7 +5,7 @@ import Attachment from './Attachment';
 
 const AttachmentBlock: FC<{ pre?: JSX.Element | string | undefined; color?: string | undefined }> = ({
 	pre,
-	color = 'neutral-600',
+	color = 'annotation',
 	children,
 }) => (
 	<Attachment>

apps/meteor/client/components/message/Attachments/Attachment/AttachmentDetails.tsx

@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import React, { FC, ComponentProps } from 'react';
 
 const AttachmentDetails: FC<ComponentProps<typeof Box>> = ({ ...props }) => (
-	<Box rcx-attachment__details fontScale='p2' color='info' bg='neutral-200' pi='x16' pb='x16' {...props} />
+	<Box rcx-attachment__details fontScale='p2' color='hint' bg='neutral-200' pi='x16' pb='x16' {...props} />
 );
 
 export default AttachmentDetails;

apps/meteor/client/components/message/Attachments/QuoteAttachment.tsx

@@ -45,8 +45,8 @@ export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps): ReactElem
 					borderRadius='x2'
 					borderWidth='x2'
 					borderStyle='solid'
-					borderColor='neutral-200'
-					borderInlineStartColor='neutral-500'
+					borderColor='extra-light'
+					borderInlineStartColor='light'
 				>
 					<AttachmentAuthor>
 						<AttachmentAuthorAvatar url={attachment.author_icon} />

apps/meteor/client/components/message/Attachments/components/ImageBox.tsx

@@ -12,7 +12,7 @@ const ImageBox: FC<ComponentProps<typeof Box>> = (props) => (
 		borderRadius='x2'
 		borderWidth='x2'
 		borderStyle='solid'
-		borderColor='neutral-200'
+		borderColor='extra-light'
 		{...props}
 	/>
 );

apps/meteor/client/components/message/Attachments/components/Load.tsx

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
@@ -12,7 +12,7 @@ const Load: FC<LoadProps> = ({ load, ...props }) => {
 	const t = useTranslation();
 	const clickable = css`
 		cursor: pointer;
-		background: var(--rxc-color-neutral-100, ${colors.n100}) !important;
+		background: ${Palette.surface['surface-tint']};
 
 		&:hover,
 		&:focus {
@@ -21,7 +21,7 @@ const Load: FC<LoadProps> = ({ load, ...props }) => {
 	`;
 	return (
 		<ImageBox className={clickable} {...props} onClick={load}>
-			<Icon name='image' color='neutral-700' size='x64' />
+			<Icon name='image' color='hint' size='x64' />
 			<Box fontScale='h2' color='default'>
 				{t('Click_to_load')}
 			</Box>

apps/meteor/client/components/message/Attachments/components/Retry.tsx

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon } from '@rocket.chat/fuselage';
+import { Box, Icon, Palette } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, ComponentProps } from 'react';
@@ -12,7 +12,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 	const t = useTranslation();
 	const clickable = css`
 		cursor: pointer;
-		background: var(--rxc-color-neutral-100, ${colors.n100}) !important;
+		background: ${Palette.surface['surface-tint']};
 
 		&:hover,
 		&:focus {
@@ -21,7 +21,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 	`;
 	return (
 		<ImageBox className={clickable} onClick={retry} size={160}>
-			<Icon name='refresh' color='neutral-700' size='x64' />
+			<Icon name='refresh' color='hint' size='x64' />
 			<Box fontScale='h2' color='default'>
 				{t('Retry')}
 			</Box>

apps/meteor/client/components/message/Metrics/MetricsItem.tsx

@@ -4,7 +4,7 @@ import React, { ComponentProps, FC } from 'react';
 type MetricsItemProps = ComponentProps<typeof Box>;
 
 const MetricsItem: FC<MetricsItemProps> = (props) => (
-	<Box display='flex' justifyContent='center' alignItems='center' fontScale='micro' color='info' mi='x4' {...props} />
+	<Box display='flex' justifyContent='center' alignItems='center' fontScale='micro' color='hint' mi='x4' {...props} />
 );
 
 export default MetricsItem;

apps/meteor/client/sidebar/footer/voip/VoipFooter.tsx

@@ -95,7 +95,7 @@ export const VoipFooter = ({
 								small
 								disabled={paused}
 								icon={muted ? 'mic-off' : 'mic'}
-								color={muted ? 'neutral-500' : 'info'}
+								color={muted ? 'disabled' : 'hint'}
 								data-tooltip={muted ? t('Turn_on_microphone') : t('Turn_off_microphone')}
 								onClick={(e): void => {
 									e.stopPropagation();
@@ -107,7 +107,7 @@ export const VoipFooter = ({
 								data-tooltip={holdTitle}
 								disabled={!isEnterprise}
 								icon={paused ? 'pause' : 'pause-unfilled'}
-								color={paused ? 'neutral-500' : 'info'}
+								color={paused ? 'disabled' : 'hint'}
 								onClick={handleHold}
 							/>
 							{options && <Menu color='neutral-500' data-tooltip={t('More_options')} options={options} />}

apps/meteor/client/sidebar/header/CreateChannel.tsx

@@ -128,7 +128,7 @@ const CreateChannel = ({
 					<Field>
 						<Field.Label>
 							{t('Topic')}{' '}
-							<Box is='span' color='neutral-600'>
+							<Box is='span' color='annotation'>
 								({t('optional')})
 							</Box>
 						</Field.Label>

apps/meteor/client/sidebar/header/UserAvatarButton.tsx

@@ -54,8 +54,8 @@ const UserAvatarButton = function UserAvatarButton(): ReactElement {
 					size={12}
 					borderWidth='x2'
 					position='absolute'
-					bg='neutral-200'
-					borderColor='neutral-200'
+					bg='surface-tint'
+					borderColor='extra-light'
 					borderRadius='full'
 					mie='neg-x2'
 					mbe='neg-x2'

apps/meteor/client/sidebar/hooks/useSidebarPaletteColor.ts

@@ -64,9 +64,10 @@ const query = { _id: /theme-color-rc/ };
 const useTheme = (): { [key: string]: string } => {
 	const customColors = useSettings(query) as { value: string; _id: string }[];
 	const result = useMemo(() => {
+		const sidebarSurface = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-background');
+
 		const n900 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-darkest');
 		const n800 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-dark');
-		const sibebarSurface = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-background');
 		const n700 = customColors.find(({ _id }) => _id === '');
 		const n600 = customColors.find(({ _id }) => _id === 'theme-color-rc-color-primary-light');
 		const n500 = customColors.find(({ _id }) => _id === 'theme-color-rc-primary-light-medium');
@@ -80,7 +81,7 @@ const useTheme = (): { [key: string]: string } => {
 			...colors,
 			...(n900 && { n900: n900.value }),
 			...(n800 && { n800: n800.value }),
-			...((sibebarSurface || n800) && { sibebarSurface: sibebarSurface?.value || n800?.value }),
+			...((sidebarSurface || n800) && { sidebarSurface: sidebarSurface?.value || n800?.value }),
 			...(n700 && { n700: n700.value }),
 			...(n600 && { n600: n600.value }),
 			...(n500 && { n500: n500.value }),
@@ -126,8 +127,8 @@ const getStyle = (
 			--rcx-button-icon-active-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-active-background-color: ${toVar(colors.n800)};
 			--rcx-button-icon-color: ${toVar(colors.n600)};
-			--rcx-button-icon-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-icon-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-icon-border-color: ${toVar(colors.sidebarSurface)};
+			--rcx-button-icon-background-color: ${toVar(colors.sidebarSurface)};
 			--rcx-button-icon-hover-background-color: ${toVar(colors.n900)};
 			--rcx-button-icon-hover-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-focus-background-color:  var(--rcx-color-neutral-300);
@@ -137,8 +138,8 @@ const getStyle = (
 			--rcx-button-icon-success-active-border-color: ${toVar(colors.n900)};
 			--rcx-button-icon-success-active-background-color: ${toVar(colors.n800)};
 			--rcx-button-icon-success-color: ${toVar(colors.n600)};
-			--rcx-button-icon-success-border-color: ${toVar(colors.sibebarSurface)};
-			--rcx-button-icon-success-background-color: ${toVar(colors.sibebarSurface)};
+			--rcx-button-icon-success-border-color: ${toVar(colors.sidebarSurface)};
+			--rcx-button-icon-success-background-color: ${toVar(colors.sidebarSurface)};
 			--rcx-button-icon-success-hover-background-color: ${toVar(colors.n900)};
 			--rcx-button-icon-success-hover-border-color: ${toVar(colors.n900)};
 
@@ -173,7 +174,7 @@ const getStyle = (
 		}
 
 		.rcx-sidebar {
-			background-color: ${toVar(colors.sibebarSurface)};
+			background-color: ${toVar(colors.sidebarSurface)};
 		}
 		`
 )(isIE11 ? ':root' : modifier);

apps/meteor/client/views/admin/apps/PriceDisplay.tsx

@@ -47,7 +47,7 @@ const PriceDisplay: FC<PriceDisplayProps> = ({ purchaseType, pricingPlans, price
 
 	return (
 		<Margins inlineStart='x8'>
-			<Tag small>
+			<Tag medium>
 				{showType && (
 					<Box color='default' withTruncatedText>
 						{t(type as TranslationKey)}

apps/meteor/client/views/admin/apps/ReleaseItem.tsx

@@ -24,7 +24,7 @@ const ReleaseItem = ({ release, ...props }: ReleaseItemProps): JSX.Element => {
 			<Box is='h4' fontWeight='700' fontSize='x16' lineHeight='x24' color='default' mie='x24'>
 				{release.version}
 			</Box>
-			<Box is='p' fontWeight='400' fontSize='x16' lineHeight='x24' color='info'>
+			<Box is='p' fontWeight='400' fontSize='x16' lineHeight='x24' color='hint'>
 				{formatDate(release.createdDate)}
 			</Box>
 		</Box>

apps/meteor/client/views/admin/apps/components/CategoryFilter/CategoryDropDownAnchor.tsx

@@ -15,7 +15,7 @@ const CategoryDropDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentPro
 				flexDirection='row'
 				flexGrow='1'
 				flexShrink='1'
-				borderColor={props.selectedCategoriesCount ? 'none' : 'neutral-500'}
+				borderColor={props.selectedCategoriesCount ? 'none' : 'light'}
 				borderWidth={props.selectedCategoriesCount ? 'none' : 'x2'}
 				bg={props.selectedCategoriesCount ? 'primary' : 'alternative'}
 			>

apps/meteor/client/views/admin/cloud/TroubleshootingSection.js

@@ -37,7 +37,7 @@ function TroubleshootingSection({ onRegisterStatusChange, ...props }) {
 		<Box is='section' {...props}>
 			<Subtitle>{t('Cloud_troubleshooting')}</Subtitle>
 
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_support')}</p>
 			</Box>
 
@@ -47,7 +47,7 @@ function TroubleshootingSection({ onRegisterStatusChange, ...props }) {
 				</Button>
 			</ButtonGroup>
 
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>
 					{t('Cloud_status_page_description')}:{' '}
 					<a href={statusPageUrl} target='_blank' rel='noopener noreferrer'>

apps/meteor/client/views/admin/cloud/WhatIsItSection.js

@@ -11,7 +11,7 @@ function WhatIsItSection(props) {
 		<Box is='section' {...props}>
 			<Subtitle>{t('Cloud_what_is_it')}</Subtitle>
 
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_what_is_it_description')}</p>
 
 				<details>

apps/meteor/client/views/admin/cloud/WorkspaceLoginSection.js

@@ -80,7 +80,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {
 
 	return (
 		<Box is='section' {...props}>
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_connected')}</p>
 			</Box>
 
@@ -96,7 +96,7 @@ function WorkspaceLoginSection({ onRegisterStatusChange, ...props }) {
 				)}
 			</ButtonGroup>
 
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_workspace_disconnect')}</p>
 			</Box>
 

apps/meteor/client/views/admin/cloud/WorkspaceRegistrationSection.js

@@ -47,7 +47,7 @@ function WorkspaceRegistrationSection({ token: initialToken, workspaceId, unique
 	return (
 		<Box marginBlock='neg-x24' {...props}>
 			<Margins block='x24'>
-				<Box withRichContent color='neutral-800'>
+				<Box withRichContent color='default'>
 					<p>{t('Cloud_token_instructions')}</p>
 				</Box>