Chore: Set missing colors

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

@@ -11,7 +11,7 @@ type NoResultsProps = {
 };
 
 const NoResults: FC<NoResultsProps> = ({ icon, title, description, buttonTitle, buttonAction }) => (
-	<Box textAlign='center'>
+	<Box textAlign='center' color='default'>
 		<Box
 			mbs='x60'
 			mbe='x20'

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

@@ -22,6 +22,7 @@ const Page = ({ background = 'light', ...props }: PageProps): ReactElement => {
 				overflow='hidden'
 				aria-labelledby='PageHeader-title'
 				bg={background}
+				color='default'
 				{...props}
 			/>
 		</PageContext.Provider>

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

@@ -3,13 +3,13 @@ import { useLayoutSizes, useLayoutContextualBarPosition } from '@rocket.chat/ui-
 import type { FC, ComponentProps } from 'react';
 import React, { memo } from 'react';
 
-const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, ...props }) => {
+const VerticalBar: FC<ComponentProps<typeof Box>> = ({ children, bg = 'room', ...props }) => {
 	const sizes = useLayoutSizes();
 	const position = useLayoutContextualBarPosition();
 	return (
 		<Box
 			rcx-vertical-bar
-			bg='room'
+			bg={bg}
 			display='flex'
 			flexDirection='column'
 			flexShrink={0}

apps/meteor/client/sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Palette } from '@rocket.chat/fuselage';
 import { useLayout, useUserPreference } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
@@ -12,6 +12,10 @@ const Sidebar = () => {
 	const sidebarHideAvatar = !useUserPreference('sidebarDisplayAvatar');
 	const { isMobile, sidebar } = useLayout();
 
+	const sideBarBackground = css`
+		background-color: ${Palette.surface['surface-tint']};
+	`;
+
 	const sideBarStyle = css`
 		position: relative;
 		z-index: 2;
@@ -23,7 +27,6 @@ const Sidebar = () => {
 		height: 100%;
 		user-select: none;
 		transition: transform 0.3s;
-		background-color: var(--sidebar-background);
 
 		&.opened {
 			box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
@@ -89,6 +92,7 @@ const Sidebar = () => {
 						'rcx-sidebar--main',
 						`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
 						sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
+						sideBarBackground,
 					].filter(Boolean)}
 					role='navigation'
 					data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}

apps/meteor/client/sidebar/sections/actions/OmnichannelCallToggleReady.tsx

@@ -47,22 +47,16 @@ export const OmnichannelCallToggleReady = ({ ...props }): ReactElement => {
 		return registered ? 'phone' : 'phone-disabled';
 	};
 
-	const getColor = (): 'warning' | 'success' | undefined => {
-		if (networkStatus === 'offline') {
-			return 'warning';
-		}
-		return registered ? 'success' : undefined;
-	};
-
 	return (
 		<Sidebar.TopBar.Action
 			icon={getIcon()}
 			disabled={inCall}
-			color={getColor()}
 			aria-checked={registered}
 			aria-label={t('VoIP_Toggle')}
 			data-tooltip={getTitle()}
 			{...props}
+			success={registered}
+			warning={networkStatus === 'offline'}
 			onClick={onClickVoipButton}
 		/>
 	);

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 ? 'on-success' : undefined}
+			success={agentAvailable}
 			icon={agentAvailable ? 'message' : 'message-disabled'}
 			onClick={handleAvailableStatusChange}
 		/>

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx

@@ -54,7 +54,7 @@ const CustomUserStatusRoute = (): ReactElement => {
 				</Page.Content>
 			</Page>
 			{context && (
-				<VerticalBar flexShrink={0}>
+				<VerticalBar bg='light' flexShrink={0}>
 					<VerticalBar.Header>
 						{context === 'edit' ? t('Custom_User_Status_Edit') : t('Custom_User_Status_Add')}
 						<VerticalBar.Close onClick={handleClose} />

apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx

@@ -134,11 +134,27 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
 					<Label mb='x4'>{t('From')}</Label>
-					<InputBox type='date' flexShrink={0} placeholder={t('From')} onChange={handleFrom} value={from} data-qa='current-chats-from' />
+					<InputBox
+						type='date'
+						flexShrink={0}
+						placeholder={t('From')}
+						onChange={handleFrom}
+						value={from}
+						data-qa='current-chats-from'
+						color='default'
+					/>
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
 					<Label mb='x4'>{t('To')}</Label>
-					<InputBox type='date' flexShrink={0} placeholder={t('To')} onChange={handleTo} value={to} data-qa='current-chats-to' />
+					<InputBox
+						type='date'
+						flexShrink={0}
+						placeholder={t('To')}
+						onChange={handleTo}
+						value={to}
+						data-qa='current-chats-to'
+						color='default'
+					/>
 				</Box>
 
 				<RemoveAllClosed

apps/meteor/client/views/omnichannel/directory/calls/contextualBar/VoipInfo.tsx

@@ -47,7 +47,7 @@ export const VoipInfo = ({ room, onClickClose /* , onClickReport  */ }: VoipInfo
 				<InfoPanel>
 					<InfoPanel.Field>
 						<InfoPanel.Label>{t('Channel')}</InfoPanel.Label>
-						<Box>
+						<Box color='default'>
 							<Icon size='x24' name='phone' />
 							{t('Voice_Call')}
 						</Box>

apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx

@@ -13,16 +13,16 @@ const AnnouncementComponent: FC<AnnouncementComponentParams> = ({ children, onCl
 		color: ${Palette.text['font-pure-black'].theme('announcement-text')};
 		cursor: pointer;
 		transition: transform 0.2s ease-out;
-		a {
+		a:link {
 			color: ${Palette.text['font-pure-black'].theme('announcement-text')};
-			text-decoration: underline !important;
+			text-decoration: underline;
 		}
 		> * {
 			flex: auto;
 		}
 		&:hover,
 		&:focus {
-			text-decoration: underline !important;
+			text-decoration: underline;
 		}
 	`;
 

apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx

@@ -37,7 +37,7 @@ const CannedResponsesFilter: FC<CannedResponsesFilterProps> = ({
 	}, []);
 
 	return (
-		<Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection='row' {...props}>
+		<Box mb='x16' is='form' onSubmit={handleFormSubmit} display='flex' flexDirection='row' color='default' {...props}>
 			<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 				<Box mb='x4'>{t('Search')}</Box>
 				<TextInput addon={<Icon name='magnifier' size='x20' />} onChange={setShortcut} value={shortcutValue} />

ee/packages/ui-theming/src/sidebarPalette.ts

@@ -31,9 +31,9 @@ export const palette = [
 		description: 'Badge Background',
 		list: [
 			{ name: 'badge-background-level-1', token: '', color: '#484C51' },
-			{ name: 'badge-background-level-2', token: '', color: '#3070CF' },
-			{ name: 'badge-background-level-3', token: '', color: '#A9642D' },
-			{ name: 'badge-background-level-4', token: '', color: '#BB3E4E' },
+			{ name: 'badge-background-level-2', token: '', color: '#2C65BA' },
+			{ name: 'badge-background-level-3', token: '', color: '#955828' },
+			{ name: 'badge-background-level-4', token: '', color: '#B43C4C' },
 		],
 	},
 	{

ee/packages/ui-theming/src/sidebarPaletteDark.ts

@@ -33,9 +33,9 @@ export const palette = [
 		description: 'Badge Background',
 		list: [
 			{ name: 'badge-background-level-1', token: '', color: '#484C51' },
-			{ name: 'badge-background-level-2', token: '', color: '#3070CF' },
-			{ name: 'badge-background-level-3', token: '', color: '#A9642D' },
-			{ name: 'badge-background-level-4', token: '', color: '#BB3E4E' },
+			{ name: 'badge-background-level-2', token: '', color: '#2C65BA' },
+			{ name: 'badge-background-level-3', token: '', color: '#955828' },
+			{ name: 'badge-background-level-4', token: '', color: '#B43C4C' },
 		],
 	},
 	{

yarn.lock

@@ -6352,16 +6352,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-in-js@npm:~0.31.23-dev.39":
-  version: 0.31.23-dev.39
-  resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.39"
+"@rocket.chat/css-in-js@npm:~0.31.23-dev.46":
+  version: 0.31.23-dev.46
+  resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.46"
   dependencies:
     "@emotion/hash": ^0.9.0
-    "@rocket.chat/css-supports": ~0.31.23-dev.39
-    "@rocket.chat/memo": ~0.31.23-dev.39
-    "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.39
+    "@rocket.chat/css-supports": ~0.31.23-dev.46
+    "@rocket.chat/memo": ~0.31.23-dev.46
+    "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.46
     stylis: ~4.1.3
-  checksum: 15ee4bc8a9867f43b8bf9a9ceaf5e547e8ad881e743b7ef454c3e6031b9ab7b98a2b26a1dba6179b9ddf098765f18f4d576146128bb25c43704b950caba88ddf
+  checksum: 95485e1e2220f19b55abe8d36f71689ab1be1eb97d07fdd09ec327332943ceb46dd182c724ecfd2e811bb67c9175c28ff1eaf7061fe08d1294e51f373e20a0ae
   languageName: node
   linkType: hard
 
@@ -6374,12 +6374,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:~0.31.23-dev.39":
-  version: 0.31.23-dev.39
-  resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.39"
+"@rocket.chat/css-supports@npm:~0.31.23-dev.46":
+  version: 0.31.23-dev.46
+  resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.46"
   dependencies:
-    "@rocket.chat/memo": ~0.31.23-dev.39
-  checksum: bfdd8bedcd15be170a08714406a9b7a752371c6479c1bc332a178320dbdeccf7d72f9392a2fc2cf583cc2caecc03c9cacad0f224e6c72c1b9b1a61479a226ec2
+    "@rocket.chat/memo": ~0.31.23-dev.46
+  checksum: 116532e5f39f09158c444ca8b2c1992a7ad3f37c3660cf146dc81afdb858b3bf25dd2b7c533054ae6b7e0d368c2234ec421649b3624afde4665f01dc583b0aad
   languageName: node
   linkType: hard
 
@@ -6566,10 +6566,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.215":
-  version: 0.32.0-dev.215
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.215"
-  checksum: a7acef2232258d35ff254a137d190a5da2d1c3a950678f73649572c8d70e15cba141865f9e6cb9a0e9d75f9a053b1c2fbb93834ed718e610d5d5e551a684a110
+"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.222":
+  version: 0.32.0-dev.222
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.222"
+  checksum: f3ac8c85ced6ec5e0c2b442985f9d94cad9dae22447cd3006cdebdd41bb77d6cb98ecee6b62b835898cc70188dc84a3b5af3b8613a81c1a2f274b250eb83af62
   languageName: node
   linkType: hard
 
@@ -6629,14 +6629,14 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/fuselage@npm:next":
-  version: 0.32.0-dev.265
-  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.265"
-  dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.39
-    "@rocket.chat/css-supports": ~0.31.23-dev.39
-    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.215
-    "@rocket.chat/memo": ~0.31.23-dev.39
-    "@rocket.chat/styled": ~0.31.23-dev.39
+  version: 0.32.0-dev.272
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.272"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.23-dev.46
+    "@rocket.chat/css-supports": ~0.31.23-dev.46
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.222
+    "@rocket.chat/memo": ~0.31.23-dev.46
+    "@rocket.chat/styled": ~0.31.23-dev.46
     invariant: ^2.2.4
     react-aria: ~3.19.0
     react-keyed-flatten-children: ^1.3.0
@@ -6648,7 +6648,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 5697152fd532bf561ee59a0b74c83a091b166fae075e542beeb80de08bf0e08fc5cc7a1ff7d174f65fa5485d4312bce7b22ad0a0e1b94b903031947f1f41b8e9
+  checksum: 102c0a401b7d7fdfa88a6d6da6f64be89761992f740a7ba8611ab1f1bf52813a8c6a2127e8920057b7364f010146ee2b1fe7c39ddb7f4fa2eb85b02950583339
   languageName: node
   linkType: hard
 
@@ -6836,10 +6836,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:~0.31.23-dev.39":
-  version: 0.31.23-dev.39
-  resolution: "@rocket.chat/memo@npm:0.31.23-dev.39"
-  checksum: 5e6e4af04905c8ca7a9126a08d5d1532f161f595c7e41633b8288fa8e5e7a9212bdcb0740d5b62f41cb90c878894b7190ff19a2e22bc4bce6ab37bb56cbc4b0f
+"@rocket.chat/memo@npm:~0.31.23-dev.46":
+  version: 0.31.23-dev.46
+  resolution: "@rocket.chat/memo@npm:0.31.23-dev.46"
+  checksum: e69a5cd71661c4f6513986a0f507b649ccbe5b98cd577ea1e0e48fd80bca19de964b0d9fddd20f869048c41bcfa80846911c7353d20be505928ecbcca3c50738
   languageName: node
   linkType: hard
 
@@ -7403,13 +7403,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/styled@npm:~0.31.23-dev.39":
-  version: 0.31.23-dev.39
-  resolution: "@rocket.chat/styled@npm:0.31.23-dev.39"
+"@rocket.chat/styled@npm:~0.31.23-dev.46":
+  version: 0.31.23-dev.46
+  resolution: "@rocket.chat/styled@npm:0.31.23-dev.46"
   dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.39
+    "@rocket.chat/css-in-js": ~0.31.23-dev.46
     tslib: ^2.3.1
-  checksum: b88b7c6c420fb41a39c5f1c07305aa7efd1c5337af88726e53db768ef5b411bf7a2683333135cf77cb7be79e7b1cb443cb3ca17aa6cfe154826469f11aa1a551
+  checksum: 5db6281e7588f6acc564805f3b0dfb31372ae1ce4b6b14d0c5c5dd78dba1285ded6280945e40d1faaf7691fd17b757db64b681c4688002d209d3f61a9b639767
   languageName: node
   linkType: hard
 
@@ -7425,15 +7425,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.39":
-  version: 0.31.23-dev.39
-  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.39"
+"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.46":
+  version: 0.31.23-dev.46
+  resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.46"
   dependencies:
-    "@rocket.chat/css-supports": ~0.31.23-dev.39
+    "@rocket.chat/css-supports": ~0.31.23-dev.46
     tslib: ^2.3.1
   peerDependencies:
     stylis: 4.0.10
-  checksum: 955942b422fcc5370e4fab3ec5274c4425c29a96108b26737d4dbb4427ec0f3eff341bae8a1b2bf7775482eb9bfc1ce4fba69f56eaf7f9b0a013ba5b21f29025
+  checksum: a67c52e29e8fa2a0ff22913c239ab7e6c0ceda15b07fc28ee4dbc60937c7d438d6067d663f7a31bfcd90f8fc4fa2c6c428791fa93073232c8afd58206b83856c
   languageName: node
   linkType: hard