[FIX] Tokens usage (#27541)

apps/meteor/client/components/message/Attachments/FieldsAttachment/Field.tsx

@@ -10,10 +10,8 @@ type FieldProps = {
 
 // TODO: description missing color token
 const Field: FC<FieldProps> = ({ title, value, ...props }) => (
-	<Box mb='x4' pi='x4' width='full' flexBasis={100} flexShrink={0} {...props}>
-		<Box fontScale='p2m' color='default'>
-			{title}
-		</Box>
+	<Box mb='x4' pi='x4' width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
+		<Box fontScale='p2m'>{title}</Box>
 		{value}
 	</Box>
 );

apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppDetails/AppDetails.tsx

@@ -24,7 +24,7 @@ const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 	const isCarouselVisible = screenshots && Boolean(screenshots.length);
 
 	return (
-		<Box maxWidth='x640' w='full' marginInline='auto'>
+		<Box maxWidth='x640' w='full' marginInline='auto' color='default'>
 			{app.licenseValidation && (
 				<>
 					{Object.entries(app.licenseValidation.warnings).map(([key]) => (
@@ -46,14 +46,14 @@ const AppDetails = ({ app }: { app: AppInfo }): ReactElement => {
 					{isCarouselVisible && <ScreenshotCarouselAnchor screenshots={screenshots} />}
 
 					<Box is='section'>
-						<Box fontScale='h4' mbe='x8'>
+						<Box fontScale='h4' mbe='x8' color='titles-labels'>
 							{t('Description')}
 						</Box>
 						<Box dangerouslySetInnerHTML={{ __html: isMarkdown ? detailedDescription.rendered : description }} withRichContent />
 					</Box>
 
 					<Box is='section'>
-						<Box fontScale='h4' mbe='x8'>
+						<Box fontScale='h4' mbe='x8' color='titles-labels'>
 							{t('Categories')}
 						</Box>
 						<ButtonGroup medium flexWrap='wrap'>

apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx

@@ -71,7 +71,6 @@ const AppRow = (props: AppRowProps): ReactElement => {
 			flexDirection='row'
 			justifyContent='space-between'
 			alignItems='center'
-			bg='surface'
 			mbe='x8'
 			pb='x8'
 			pi='x16'

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

@@ -1,54 +1,46 @@
-import type { Select } from '@rocket.chat/fuselage';
 import { Box, Button, Icon } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentProps } from 'react';
+import type { MouseEventHandler } from 'react';
 import React, { forwardRef } from 'react';
 
-const CategoryDropDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentProps<typeof Select>> & { selectedCategoriesCount: number }>(
-	function CategoryDropDownAnchor(props, ref) {
+const CategoryDropDownAnchor = forwardRef<HTMLInputElement, { selectedCategoriesCount: number; onClick?: MouseEventHandler<HTMLElement> }>(
+	function CategoryDropDownAnchor({ onClick, selectedCategoriesCount }, ref) {
 		const t = useTranslation();
 
 		return (
 			<Button
 				ref={ref}
-				onClick={props.onClick}
+				onClick={onClick}
 				display='flex'
 				alignItems='center'
 				flexDirection='row'
 				flexGrow='1'
 				flexShrink='1'
-				borderColor={props.selectedCategoriesCount ? 'none' : 'light'}
-				borderWidth={props.selectedCategoriesCount ? 'none' : 'x2'}
-				bg={props.selectedCategoriesCount ? 'primary' : 'alternative'}
+				borderColor={selectedCategoriesCount ? 'none' : 'light'}
+				borderWidth={selectedCategoriesCount ? 'none' : 'x2'}
+				{...(selectedCategoriesCount ? { primary: true } : { bg: 'surface-light' })}
 			>
-				{props.selectedCategoriesCount > 0 && (
+				{selectedCategoriesCount > 0 && (
 					<Box
 						mie='x6'
 						borderRadius='x32'
-						bg='alternative'
+						bg='light'
 						fontWeight={700}
 						fontSize='micro'
-						color='primary'
+						color='on-info'
 						pi='x6'
 						display='flex'
 						alignItems='center'
 						justifyContent='center'
 					>
-						{props.selectedCategoriesCount}
+						{selectedCategoriesCount}
 					</Box>
 				)}
-				<Box
-					is='span'
-					display='flex'
-					flexGrow={1}
-					fontWeight={400}
-					fontSize='p2b'
-					color={props.selectedCategoriesCount ? 'alternative' : 'hint'}
-				>
-					{props.selectedCategoriesCount > 0 ? t('Categories') : t('All_categories')}
+				<Box is='span' display='flex' flexGrow={1} fontWeight={400} fontSize='p2b' color={selectedCategoriesCount ? 'white' : 'hint'}>
+					{selectedCategoriesCount > 0 ? t('Categories') : t('All_categories')}
 				</Box>
 				<Box mi='x4' display='flex' alignItems='center' justifyContent='center'>
-					<Icon name='chevron-down' fontSize='x20' color={props.selectedCategoriesCount ? 'alternative' : 'hint'} />
+					<Icon name='chevron-down' fontSize='x20' color={selectedCategoriesCount ? 'white' : 'hint'} />
 				</Box>
 			</Button>
 		);

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

@@ -6,7 +6,7 @@ import type { CategoryDropDownListProps } from '../../definitions/CategoryDropdo
 
 const CategoryDropDownList: FC<CategoryDropDownListProps> = function CategoryDropDownList({ groups, onSelected }) {
 	return (
-		<Tile overflow='auto' pb='x12' pi={0} elevation='2' w='full' bg='alternative' borderRadius='x2'>
+		<Tile overflow='auto' pb='x12' pi={0} elevation='2' w='full' bg='light' borderRadius='x2'>
 			{groups.map((group, index) => (
 				<Fragment key={index}>
 					{group.label && (

apps/meteor/client/views/admin/apps/components/RadioButtonList.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { RadioDropDownProps } from '../definitions/RadioDropDownDefinitions';
 
 const RadioButtonList = ({ group, onSelected }: RadioDropDownProps): ReactElement => (
-	<Tile overflow='auto' pb='x12' pi={0} elevation='2' w='full' bg='alternative' borderRadius='x2'>
+	<Tile overflow='auto' pb='x12' pi={0} elevation='2' w='full' bg='light' borderRadius='x2'>
 		{group.label && (
 			<Box pi='x16' pbs='x8' pbe='x4' fontScale='micro' textTransform='uppercase' color='default'>
 				{group.label}

apps/meteor/client/views/admin/apps/components/RadioDropDown/RadioDownAnchor.tsx

@@ -10,7 +10,7 @@ const RadioDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentProps<type
 
 		const selectedFilter = group?.items.find((item) => item.checked)?.label;
 
-		return <Select ref={ref} placeholder={selectedFilter} options={[]} onChange={(): number => 0} {...props} />;
+		return <Select ref={ref} placeholder={selectedFilter} options={[]} onChange={(): number => 0} color='hint' {...props} />;
 	},
 );
 

apps/meteor/client/views/admin/apps/components/ScreenshotCarouselAnchor.tsx

@@ -1,7 +1,6 @@
 import type { AppScreenshot } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Icon } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -106,9 +105,9 @@ const ScreenshotCarouselAnchor = ({ screenshots }: ScreenshotCarouselAnchorProps
 					]}
 				/>
 
-				<Box display='flex' flexDirection='row' bg={colors.n100} pi='x16' pb='x10' alignItems='center'>
+				<Box display='flex' flexDirection='row' bg='tint' pi='x16' pb='x10' alignItems='center'>
 					<Icon name='image' size='x24' mie='x8' />{' '}
-					<Box is='span' fontWeight={500} fontSize='x14' color={colors.n800}>
+					<Box is='span' fontWeight={500} fontSize='x14' color='default'>
 						{currentPreviewIndex + 1} of {screenshots.length}
 					</Box>
 				</Box>

apps/meteor/client/views/admin/users/InviteUsers.tsx

@@ -25,7 +25,7 @@ const InviteUsers = (props: InviteUsersProps): ReactElement => {
 	};
 
 	return (
-		<VerticalBar.ScrollableContent {...props}>
+		<VerticalBar.ScrollableContent {...props} color='default'>
 			<Box is='h2' fontScale='h2' mb='x8'>
 				{t('Send_invitation_email')}
 			</Box>

apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx

@@ -1,7 +1,6 @@
 import type { ReadReceipt } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Box, Palette } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -11,7 +10,7 @@ import { useUserDisplayName } from '../../../../hooks/useUserDisplayName';
 
 const hoverStyle = css`
 	&:hover {
-		background-color: ${colors.n400};
+		background-color: ${Palette.surface['surface-neutral']};
 	}
 `;
 

apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx

@@ -1,7 +1,6 @@
 import type { IWebdavNode } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon, Skeleton, States, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { Box, Icon, Skeleton, States, StatesIcon, StatesTitle, Palette } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ComponentProps } from 'react';
 import React from 'react';
@@ -20,7 +19,7 @@ const WebdavFilePickerGrid = ({ webdavNodes, onNodeClick, isLoading }: WebdavFil
 
 	const hoverStyle = css`
 		&:hover {
-			background-color: ${colors.n400};
+			background-color: ${Palette.surface['surface-neutral']};
 			cursor: pointer;
 		}
 	`;

apps/meteor/ee/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx

@@ -13,7 +13,7 @@ const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps): ReactElement =>
 	const percentage = Math.max(0, Math.min((100 / limit) * members, 100));
 	const closeToLimit = percentage >= 80;
 	const reachedLimit = percentage >= 100;
-	const color = closeToLimit ? 'danger-500' : 'success-500';
+	const color = closeToLimit ? 'status-font-on-danger' : 'status-font-on-success';
 	const seatsLeft = Math.max(0, limit - members);
 
 	return (

apps/meteor/ee/client/voip/modal/DialPad/PadButton.tsx

@@ -1,6 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Button } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Box, Button, Palette } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -19,7 +18,7 @@ const padButtonStyle = css`
 	align-items: center;
 
 	&:hover {
-		background-color: ${colors.n400};
+		background-color: ${Palette.surface['surface-neutral']};
 	}
 `;