fix: codeBlock styles in light mode

.changeset/five-shoes-fly.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed codeBlock styles in light mode

apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx

@@ -1,15 +1,14 @@
-import { Box, PaletteStyleTag } from '@rocket.chat/fuselage';
+import { Box } from '@rocket.chat/fuselage';
 import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
-import { useThemeMode } from '@rocket.chat/ui-theming/src/hooks/useThemeMode';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 import Sidebar from '../../../sidebar';
 import AccessibilityShortcut from './AccessibilityShortcut';
+import { MainLayoutStyleTags } from './MainLayoutStyleTags';
 
 const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => {
 	const { isEmbedded: embeddedLayout } = useLayout();
-	const [, , theme] = useThemeMode();
 
 	const modal = useCurrentModal();
 	const currentRoutePath = useCurrentRoutePath();
@@ -48,8 +47,7 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement
 			aria-hidden={Boolean(modal)}
 		>
 			<AccessibilityShortcut />
-			<PaletteStyleTag theme={theme} selector='.rcx-content--main, .rcx-tile' />
-			<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main' tagId='sidebar-palette' />
+			<MainLayoutStyleTags />
 			{!removeSidenav && <Sidebar />}
 			<main
 				id='main-content'

apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.spec.tsx

@@ -0,0 +1,31 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, queryByAttribute } from '@testing-library/react';
+import React from 'react';
+
+import { MainLayoutStyleTags } from './MainLayoutStyleTags';
+
+describe('MainLayout style tags', () => {
+	it('should create the Light theme style tag', () => {
+		render(<MainLayoutStyleTags />, {
+			wrapper: mockAppRoot().withUserPreference('themeAppearence', 'light').build(),
+		});
+		const tagLight = queryByAttribute('id', document.head, 'main-palette-light');
+		expect(tagLight).not.toBeNull();
+	});
+
+	it('should create the Dark theme style tag', () => {
+		render(<MainLayoutStyleTags />, {
+			wrapper: mockAppRoot().withUserPreference('themeAppearence', 'dark').build(),
+		});
+		const tagDark = queryByAttribute('id', document.head, 'main-palette-dark');
+		expect(tagDark).not.toBeNull();
+	});
+
+	it('should create the codeBlock style tag when in dark mode', () => {
+		render(<MainLayoutStyleTags />, {
+			wrapper: mockAppRoot().withUserPreference('themeAppearence', 'dark').build(),
+		});
+		const style = queryByAttribute('id', document.head, 'codeBlock-palette');
+		expect(style).not.toBeNull();
+	});
+});

apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx

@@ -0,0 +1,17 @@
+import { PaletteStyleTag } from '@rocket.chat/fuselage';
+import { useThemeMode } from '@rocket.chat/ui-theming/src/hooks/useThemeMode';
+import React from 'react';
+
+import { codeBlock } from '../lib/codeBlockStyles';
+
+export const MainLayoutStyleTags = () => {
+	const [, , theme] = useThemeMode();
+
+	return (
+		<>
+			<PaletteStyleTag theme={theme} selector='.rcx-content--main, .rcx-tile' tagId={`main-palette-${theme}`} />
+			<PaletteStyleTag theme='dark' selector='.rcx-sidebar--main' tagId='sidebar-palette' />
+			{theme === 'dark' && <PaletteStyleTag selector='.rcx-content--main' palette={codeBlock} tagId='codeBlock-palette' />}
+		</>
+	);
+};

apps/meteor/client/views/root/lib/codeBlockStyles.ts

@@ -0,0 +1,74 @@
+export const codeBlock = `pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+code.hljs {
+	padding: 3px 5px;
+}
+.hljs {
+	background: #1d1f21;
+	color: #c5c8c6;
+}
+.hljs span::selection,
+.hljs::selection {
+	background: #373b41;
+}
+.hljs span::-moz-selection,
+.hljs::-moz-selection {
+	background: #373b41;
+}
+.hljs-name,
+.hljs-title {
+	color: #f0c674;
+}
+.hljs-comment,
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+	color: #707880;
+}
+.hljs-deletion,
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-symbol {
+	color: #c66;
+}
+.hljs-addition,
+.hljs-doctag,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-string {
+	color: #b5bd68;
+}
+.hljs-attribute,
+.hljs-code,
+.hljs-selector-id {
+	color: #b294bb;
+}
+.hljs-bullet,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag {
+	color: #81a2be;
+}
+.hljs-subst,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-variable {
+	color: #8abeb7;
+}
+.hljs-built_in,
+.hljs-quote,
+.hljs-section,
+.hljs-selector-class,
+.hljs-type {
+	color: #de935f;
+}
+.hljs-emphasis {
+	font-style: italic;
+}
+.hljs-strong {
+	font-weight: 700;
+}`;

apps/meteor/package.json

@@ -242,7 +242,7 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/fuselage-hooks": "^0.33.1",
 		"@rocket.chat/fuselage-polyfills": "~0.31.25",
 		"@rocket.chat/fuselage-toastbar": "^0.31.26",

ee/packages/ui-theming/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/fuselage-hooks": "^0.33.1",
 		"@rocket.chat/icons": "^0.36.0",
 		"@rocket.chat/ui-contexts": "workspace:~",

packages/fuselage-ui-kit/package.json

@@ -66,7 +66,7 @@
     "@rocket.chat/apps-engine": "^1.42.2",
     "@rocket.chat/core-typings": "workspace:^",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.54.1",
+    "@rocket.chat/fuselage": "^0.54.2",
     "@rocket.chat/fuselage-hooks": "^0.33.1",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/icons": "^0.36.0",

packages/gazzodown/package.json

@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.20",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/fuselage-tokens": "^0.33.1",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/styled": "~0.31.25",

packages/ui-avatar/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.20",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/ui-contexts": "workspace:^",
 		"@types/babel__core": "~7.20.3",
 		"@types/react": "~17.0.69",

packages/ui-client/package.json

@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.20",
 		"@react-aria/toolbar": "^3.0.0-beta.1",
 		"@rocket.chat/css-in-js": "~0.31.25",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/fuselage-hooks": "^0.33.1",
 		"@rocket.chat/icons": "^0.36.0",
 		"@rocket.chat/mock-providers": "workspace:^",

packages/ui-composer/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "~7.22.20",
     "@react-aria/toolbar": "^3.0.0-beta.1",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.54.1",
+    "@rocket.chat/fuselage": "^0.54.2",
     "@rocket.chat/icons": "^0.36.0",
     "@storybook/addon-actions": "~6.5.16",
     "@storybook/addon-docs": "~6.5.16",

packages/ui-video-conf/package.json

@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.20",
 		"@rocket.chat/css-in-js": "~0.31.25",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "^0.54.1",
+		"@rocket.chat/fuselage": "^0.54.2",
 		"@rocket.chat/fuselage-hooks": "^0.33.1",
 		"@rocket.chat/icons": "^0.36.0",
 		"@rocket.chat/styled": "~0.31.25",

packages/uikit-playground/package.json

@@ -15,7 +15,7 @@
     "@codemirror/tooltip": "^0.19.16",
     "@lezer/highlight": "^1.1.6",
     "@rocket.chat/css-in-js": "~0.31.25",
-    "@rocket.chat/fuselage": "^0.54.1",
+    "@rocket.chat/fuselage": "^0.54.2",
     "@rocket.chat/fuselage-hooks": "^0.33.1",
     "@rocket.chat/fuselage-polyfills": "~0.31.25",
     "@rocket.chat/fuselage-toastbar": "^0.31.26",