[FIX] CSS vars usage

apps/meteor/app/theme/client/imports/components/message-box.css

@@ -75,7 +75,7 @@
 
 			width: 0;
 
-			content: "\2026"; /* ascii code for the ellipsis character */
+			content: '\2026'; /* ascii code for the ellipsis character */
 			animation: ellipsis steps(4, end) 1.5s infinite;
 			vertical-align: bottom;
 		}
@@ -113,6 +113,7 @@
 
 		resize: none;
 
+		color: var(--message-box-color);
 		border: 0;
 		background-color: transparent;
 
@@ -128,12 +129,15 @@
 
 	&__icon {
 		display: flex;
+
 		flex: auto 0 0;
 
 		width: 50px;
 		height: 21px;
 
 		cursor: pointer;
+
+		color: var(--message-box-color);
 		align-items: center;
 		justify-content: center;
 

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

@@ -2,6 +2,11 @@
 	background-color: var(--content-background-color);
 }
 
+:root {
+	--rcx-color-surface-light: var(--content-background-color);
+	--rcx-color-background-light: var(--content-background-color);
+}
+
 .color-content-background-color {
 	color: var(--content-background-color);
 }

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

@@ -171,14 +171,14 @@
 	*/
 	--input-font-size: 0.875rem;
 	--input-title-text-size: var(--input-font-size);
-	--input-title-color: #2d343d;
-	--input-text-color: var(--color-dark-medium);
-	--input-placeholder-color: var(--color-gray-medium);
-	--input-icon-color: var(--color-dark);
-	--input-border-color: var(--color-gray-light);
+	--input-title-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
+	--input-text-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
+	--input-placeholder-color: var(--rc-input-colors-placeholder-color, var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, #9ea2a8)));
+	--input-icon-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
+	--input-border-color: var(--rcx-input-colors-border-color, var(--rcx-color-stroke-light, var(--rcx-color-neutral-500, var(--color-gray-light))));
 	--input-border-width: var(--border);
 	--input-border-radius: var(--border-radius);
-	--input-description-text-color: var(--color-gray);
+	--input-description-text-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
 	--input-description-text-size: var(--input-font-size);
 	--input-error-color: var(--rc-color-error);
 
@@ -270,20 +270,6 @@
 	--sidebar-item-user-status-radius: 50%;
 	--sidebar-item-text-size: 0.875rem;
 
-	/*
-	* Modal - Create Channel
-	*/
-	--create-channel-gap-between-elements: 1rem;
-	--create-channel-title-color: var(--color-darkest);
-	--create-channel-title-text-size: 1.375rem;
-	--create-channel-description-color: var(--color-gray);
-	--create-channel-description-text-size: 0.875rem;
-
-	/*
-	* Toolbar
-	*/
-	--toolbar-placeholder-color: var(--color-gray);
-
 	/*
 	* Rooms list
 	*/
@@ -332,33 +318,19 @@
 	* Message box
 	*/
 	--message-box-text-size: var(--input-font-size);
-	--message-box-placeholder-color: var(--color-gray-medium);
-	--message-box-markdown-color: var(--color-gray);
-	--message-box-markdown-hover-color: var(--color-dark);
-	--message-box-user-activity-color: var(--color-gray);
+	--message-box-placeholder-color: var(--rc-input-colors-placeholder-color, var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, #9ea2a8)));
+	--message-box-markdown-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
+	--message-box-markdown-hover-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
+	--message-box-user-activity-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
 	--message-box-user-activity-text-size: 0.75rem;
-	--message-box-user-activity-user-color: var(--color-dark);
-	--message-box-container-border-color: var(--color-gray-medium);
+	--message-box-user-activity-user-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, var(--color-dark)));
+	--message-box-container-border-color: var(--rcx-input-colors-border-color, var(--rcx-color-stroke-light, var(--rcx-color-neutral-500, var(--color-gray-medium))));
 	--message-box-container-border-width: var(--border);
 	--message-box-container-border-radius: var(--border-radius);
-	--message-box-editing-color: #fff6d6;
-	--message-box-popover-title-text-color: var(--color-gray);
+	--message-box-editing-color: var(--rcx-color-status-background-warning, var(--rcx-color-status-warning, #ffecad));
+	--message-box-popover-title-text-color: var(--rcx-color-font-annotation, var(--rcx-color-neutral-600, var(--color-gray)));
 	--message-box-popover-title-text-size: 0.75rem;
-
-	/*
-	* Header
-	*/
-	--header-height: 77px;
-	--header-padding: 16px;
-	--header-title-username-color-darker: var(--color-dark);
-	--header-title-font-size: var(--text-default-size);
-	--header-title-font-size--subtitle: var(--text-small-size);
-	--header-title-status-color: var(--color-gray);
-	--header-title-username-weight: 400;
-	--header-title-status-name-weight: 400;
-	--header-title-status-bullet-radius: var(--status-bullet-radius);
-	--header-title-status-bullet-size: var(--status-bullet-size);
-	--header-background-color: var(--color-white);
+	--message-box-color: var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d));
 
 	/*
 	* Flex nav
@@ -387,21 +359,4 @@
 	--tooltip-text-color: var(--color-white);
 	--tooltip-text-size: 0.75rem;
 	--tooltip-radius: var(--border-radius);
-
-	/*
-	* alert
-	*/
-	--alerts-padding: var(--sidebar-default-padding);
-	--alerts-padding-vertical: 10px;
-	--alerts-padding-vertical-large: 20px;
-	--alerts-background: #1d73f5;
-	--alerts-color: var(--color-white);
-	--alerts-font-size: var(--text-default-size);
-	--content-page-padding: 2.5rem;
-
-	/*
-	* badge
-	*/
-	--badge-size: 14px;
-	--badge-font-size: 0.625rem;
 }

apps/meteor/app/theme/server/server.js

@@ -13,21 +13,13 @@ import { addStyle } from '../../ui-master/server/inject';
 
 const logger = new Logger('rocketchat:theme');
 
-let currentHash = '';
-let currentSize = 0;
-
 export const theme = new (class {
 	constructor() {
 		this.variables = {};
 		this.packageCallbacks = [];
 		this.customCSS = '';
 		settingsRegistry.add('css', '');
 		settingsRegistry.addGroup('Layout');
-		settings.change('css', () => {
-			process.emit('message', {
-				refresh: 'client',
-			});
-		});
 
 		this.compileDelayed = _.debounce(Meteor.bindEnvironment(this.compile.bind(this)), 100);
 		settings.watchByRegex(/^theme-./, (key, value) => {
@@ -123,11 +115,10 @@ export const theme = new (class {
 	}
 })();
 
-Meteor.startup(() => {
-	settings.watch('css', (value = '') => {
-		currentHash = crypto.createHash('sha1').update(value).digest('hex');
-		currentSize = value.length;
-		addStyle('css-theme', value);
+settings.watch('css', () => {
+	addStyle('css-theme', theme.getCss());
+	process.emit('message', {
+		refresh: 'client',
 	});
 });
 
@@ -138,9 +129,10 @@ WebApp.rawConnectHandlers.use(function (req, res, next) {
 		return next();
 	}
 
+	const data = theme.getCss();
+
 	res.setHeader('Content-Type', 'text/css; charset=UTF-8');
-	res.setHeader('Content-Length', currentSize);
-	res.setHeader('ETag', `"${currentHash}"`);
-	res.write(theme.getCss());
-	res.end();
+	res.setHeader('Content-Length', data.length);
+	res.setHeader('ETag', `"${crypto.createHash('sha1').update(data).digest('hex')}"`);
+	res.end(data, 'utf-8');
 });

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='hint' bg='neutral-200' pi='x16' pb='x16' {...props} />
+	<Box rcx-attachment__details fontScale='p2' color='hint' bg='surface-tint' pi='x16' pb='x16' {...props} />
 );
 
 export default AttachmentDetails;

apps/meteor/client/components/message/Attachments/Files/VideoAttachment.tsx

@@ -1,7 +1,6 @@
 import { VideoAttachmentProps } 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 { useMediaUrl } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
@@ -17,7 +16,7 @@ import AttachmentTitle from '../Attachment/AttachmentTitle';
 import { useCollapse } from '../hooks/useCollapse';
 
 const videoAttachmentCss = css`
-	border: 2px solid ${colors.n200} !important;
+	border: 2px solid ${Palette.stroke['stroke-extra-light']} !important;
 	border-radius: 2px;
 	display: flex;
 	flex-direction: column;

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

@@ -1,7 +1,6 @@
 import { MessageQuoteAttachment } 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 React, { ReactElement } from 'react';
 
 import Attachments from '.';
@@ -14,18 +13,19 @@ import AttachmentContent from './Attachment/AttachmentContent';
 import AttachmentDetails from './Attachment/AttachmentDetails';
 import AttachmentInner from './Attachment/AttachmentInner';
 
+// TODO: remove this team collaboration
 const quoteStyles = css`
 	.rcx-attachment__details {
 		.rcx-message-body {
-			color: ${colors.n700} !important;
+			color: ${Palette.surface['surface-neutral']};
 		}
 	}
 	&:hover,
 	&:focus {
 		.rcx-attachment__details {
-			background: ${colors.n200} !important;
-			border-color: ${colors.n300} !important;
-			border-inline-start-color: ${colors.n600} !important;
+			background: ${Palette.surface['surface-hover']};
+			border-color: ${Palette.stroke['stroke-light']};
+			border-inline-start-color: ${Palette.stroke['stroke-medium']};
 		}
 	}
 `;
@@ -51,7 +51,7 @@ export const QuoteAttachment = ({ attachment }: QuoteAttachmentProps): ReactElem
 					<AttachmentAuthor>
 						<AttachmentAuthorAvatar url={attachment.author_icon} />
 						<AttachmentAuthorName
-							{...(attachment.author_name && { is: 'a', href: attachment.author_link, target: '_blank', color: 'info' })}
+							{...(attachment.author_name && { is: 'a', href: attachment.author_link, target: '_blank', color: 'annotation' })}
 						>
 							{attachment.author_name}
 						</AttachmentAuthorName>

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

@@ -1,6 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
 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';
 
@@ -16,7 +15,7 @@ const Load: FC<LoadProps> = ({ load, ...props }) => {
 
 		&:hover,
 		&:focus {
-			background: var(--rxc-color-neutral-300, ${colors.n300}) !important;
+			background: ${Palette.surface['surface-hover']};
 		}
 	`;
 	return (

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

@@ -1,6 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
 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';
 
@@ -16,7 +15,7 @@ const Retry: FC<RetryProps> = ({ retry }) => {
 
 		&:hover,
 		&:focus {
-			background: var(--rxc-color-neutral-300, ${colors.n300}) !important;
+			background: ${Palette.surface['surface-hover']};
 		}
 	`;
 	return (

apps/meteor/client/head.html

@@ -15,7 +15,7 @@
 	<meta property="twitter:image" content="assets/favicon_512.png" />
 	<link rel="manifest" href="images/manifest.json" />
 	<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nocfbnnmjnndkbipkabodnheejiegccf" />
-	<link rel="mask-icon" href="assets/safari_pinned.svg" color="#04436a">
+	<link rel="mask-icon" href="assets/safari_pinned.svg" color="#04436a" />
 	<link rel="apple-touch-icon" sizes="180x180" href="assets/touchicon_180.png" />
 	<link rel="apple-touch-icon-precomposed" href="assets/touchicon_180_pre.png" />
 </head>

apps/meteor/client/lib/clickableItem.js

@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Palette } from '@rocket.chat/fuselage';
 import React from 'react';
 
 // TODO remove border from here
@@ -8,9 +8,9 @@ export function clickableItem(Component) {
 		cursor: pointer;
 		&:hover,
 		&:focus {
-			background: ${colors.n100};
+			background: ${Palette.surface['surface-tint']};
 		}
-		border-bottom: 2px solid ${colors.n300} !important;
+		border-bottom: 2px solid ${Palette.stroke['stroke-extra-light']} !important;
 	`;
 	const WrappedComponent = (props) => <Component className={clickable} tabIndex={0} {...props} />;
 

apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx

@@ -1,6 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Divider, SidebarFooter as Footer } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { Box, Divider, Palette, SidebarFooter as Footer } from '@rocket.chat/fuselage';
 import React, { ReactElement } from 'react';
 
 import { settings } from '../../../app/settings/client';
@@ -14,14 +13,13 @@ const SidebarFooterDefault = (): ReactElement => {
 		}
 
 		& a:any-link {
-			color: ${colors.n600};
-			color: var(--rc-color-primary-light, ${colors.n600});
+			color: ${Palette.text['font-on-info']};
 		}
 	`;
 
 	return (
 		<Footer>
-			<Divider mbs={-2} mbe={0} borderColor={`${colors.n900}40`} />
+			<Divider mbs={-2} mbe={0} borderColor='neutral-900-40' />
 			<Box
 				is='footer'
 				pb='x12'

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

@@ -43,7 +43,7 @@ function ConnectToCloudSection({ onRegisterStatusChange, ...props }) {
 	return (
 		<Box is='section' {...props}>
 			<Subtitle>{t('Cloud_registration_required')}</Subtitle>
-			<Box withRichContent color='neutral-800'>
+			<Box withRichContent color='default'>
 				<p>{t('Cloud_registration_required_description')}</p>
 			</Box>
 			<ButtonGroup>

apps/meteor/client/views/room/MessageList/components/MessageContentBody.tsx

@@ -1,6 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, MessageBody } from '@rocket.chat/fuselage';
-import colors from '@rocket.chat/fuselage-tokens/colors';
+import { Box, MessageBody, Palette } from '@rocket.chat/fuselage';
 import { MarkupInteractionContext, Markup, UserMention, ChannelMention } from '@rocket.chat/gazzodown';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { useLayout, useUserPreference } from '@rocket.chat/ui-contexts';
@@ -98,15 +97,15 @@ const MessageContentBody = ({ mentions, channels, md }: MessageContentBodyProps)
 			border-radius: 2px;
 			border-width: 2px;
 			border-style: solid;
-			background-color: var(--rcx-color-neutral-100, ${colors.n100});
-			border-color: var(--rcx-color-neutral-200, ${colors.n200});
-			border-inline-start-color: var(--rcx-color-neutral-600, ${colors.n600});
+			background-color: ${Palette.surface['surface-tint']};
+			border-color: ${Palette.stroke['stroke-extra-light']};
+			border-inline-start-color: ${Palette.stroke['stroke-medium']};
 
 			&:hover,
 			&:focus {
-				background-color: var(--rcx-color-neutral-200, ${colors.n200});
-				border-color: var(--rcx-color-neutral-300, ${colors.n300});
-				border-inline-start-color: var(--rcx-color-neutral-600, ${colors.n600});
+				background-color: ${Palette.surface['surface-hover']};
+				border-color: ${Palette.stroke['stroke-light']};
+				border-inline-start-color: ${Palette.stroke['stroke-medium']};
 			}
 		}
 		> ul.task-list {