diff --git a/.changeset/five-shoes-fly.md b/.changeset/five-shoes-fly.md new file mode 100644 index 000000000000..da462e1508c7 --- /dev/null +++ b/.changeset/five-shoes-fly.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Fixed codeBlock styles in light mode diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx index b12a035d32cd..0fb26c0cbc22 100644 --- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx +++ b/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)} > - - + {!removeSidenav && }
{ + it('should create the Light theme style tag', () => { + render(, { + 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(, { + 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(, { + wrapper: mockAppRoot().withUserPreference('themeAppearence', 'dark').build(), + }); + const style = queryByAttribute('id', document.head, 'codeBlock-palette'); + expect(style).not.toBeNull(); + }); +}); diff --git a/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx b/apps/meteor/client/views/root/MainLayout/MainLayoutStyleTags.tsx new file mode 100644 index 000000000000..c830047a3424 --- /dev/null +++ b/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 ( + <> + + + {theme === 'dark' && } + + ); +}; diff --git a/apps/meteor/client/views/root/lib/codeBlockStyles.ts b/apps/meteor/client/views/root/lib/codeBlockStyles.ts new file mode 100644 index 000000000000..2c6b4bf33be0 --- /dev/null +++ b/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; +}`; diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 77120b4c9a70..3d02862c1e76 100644 --- a/apps/meteor/package.json +++ b/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", diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json index 15db49731544..437f1fda92ab 100644 --- a/ee/packages/ui-theming/package.json +++ b/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:~", diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 7a2fa548b145..4c7405ddf830 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/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", diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json index fe7b6a0df3e2..0ce09b0aa79b 100644 --- a/packages/gazzodown/package.json +++ b/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", diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json index 199129381457..a5300bc5648a 100644 --- a/packages/ui-avatar/package.json +++ b/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", diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json index 3e4dcac33f90..6b6429df099c 100644 --- a/packages/ui-client/package.json +++ b/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:^", diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json index f2f269979004..e256334c3eb4 100644 --- a/packages/ui-composer/package.json +++ b/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", diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json index 8f7b18f3ba2b..2e92e8158113 100644 --- a/packages/ui-video-conf/package.json +++ b/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", diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json index d12ece478b7c..133faa8c75ee 100644 --- a/packages/uikit-playground/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 8a3e588765df..1f73a73df3e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8743,7 +8743,7 @@ __metadata: "@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/gazzodown": "workspace:^" @@ -8795,19 +8795,19 @@ __metadata: "@rocket.chat/icons": "*" "@rocket.chat/prettier-config": "*" "@rocket.chat/styled": "*" - "@rocket.chat/ui-avatar": 3.0.0-rc.2 - "@rocket.chat/ui-contexts": 7.0.0-rc.2 - "@rocket.chat/ui-kit": 0.34.0-rc.0 - "@rocket.chat/ui-video-conf": 7.0.0-rc.2 + "@rocket.chat/ui-avatar": 3.0.0 + "@rocket.chat/ui-contexts": 7.0.0 + "@rocket.chat/ui-kit": 0.34.0 + "@rocket.chat/ui-video-conf": 7.0.0 "@tanstack/react-query": "*" react: "*" react-dom: "*" languageName: unknown linkType: soft -"@rocket.chat/fuselage@npm:^0.54.1": - version: 0.54.1 - resolution: "@rocket.chat/fuselage@npm:0.54.1" +"@rocket.chat/fuselage@npm:^0.54.2": + version: 0.54.2 + resolution: "@rocket.chat/fuselage@npm:0.54.2" dependencies: "@rocket.chat/css-in-js": ^0.31.25 "@rocket.chat/css-supports": ^0.31.25 @@ -8825,7 +8825,7 @@ __metadata: react: ^17.0.2 react-dom: ^17.0.2 react-virtuoso: 1.2.4 - checksum: 11de809f6fbee14b9941e3e97e8eb6adf0703bca7e104d7a53ece2c1dd042cb1ce31016b4e2480de9ea3ed0971cb585dfab79c513edd0ec64bbc3cd15fe2e677 + checksum: 1e49b3324f50525a002dd450a28dc8c6fca559e51c8e93449e167b50ca88767cc3dd11ac3c89ea794597c6c06a4a681aea1043b8f8bb42c49df0362bb5791019 languageName: node linkType: hard @@ -8836,7 +8836,7 @@ __metadata: "@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 @@ -8887,8 +8887,8 @@ __metadata: "@rocket.chat/fuselage-tokens": "*" "@rocket.chat/message-parser": 0.31.29 "@rocket.chat/styled": "*" - "@rocket.chat/ui-client": 7.0.0-rc.2 - "@rocket.chat/ui-contexts": 7.0.0-rc.2 + "@rocket.chat/ui-client": 7.0.0 + "@rocket.chat/ui-contexts": 7.0.0 katex: "*" react: "*" languageName: unknown @@ -9196,7 +9196,7 @@ __metadata: "@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 @@ -10092,7 +10092,7 @@ __metadata: resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar" dependencies: "@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 @@ -10106,7 +10106,7 @@ __metadata: typescript: ~5.3.3 peerDependencies: "@rocket.chat/fuselage": "*" - "@rocket.chat/ui-contexts": 7.0.0-rc.2 + "@rocket.chat/ui-contexts": 7.0.0 react: ~17.0.2 languageName: unknown linkType: soft @@ -10118,7 +10118,7 @@ __metadata: "@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:^" @@ -10159,7 +10159,7 @@ __metadata: "@rocket.chat/fuselage": "*" "@rocket.chat/fuselage-hooks": "*" "@rocket.chat/icons": "*" - "@rocket.chat/ui-contexts": 7.0.0-rc.2 + "@rocket.chat/ui-contexts": 7.0.0 react: ~17.0.2 languageName: unknown linkType: soft @@ -10171,7 +10171,7 @@ __metadata: "@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 @@ -10263,7 +10263,7 @@ __metadata: resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming" dependencies: "@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:~" @@ -10306,7 +10306,7 @@ __metadata: "@rocket.chat/css-in-js": ~0.31.25 "@rocket.chat/emitter": ~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 @@ -10335,8 +10335,8 @@ __metadata: "@rocket.chat/fuselage-hooks": "*" "@rocket.chat/icons": "*" "@rocket.chat/styled": "*" - "@rocket.chat/ui-avatar": 3.0.0-rc.2 - "@rocket.chat/ui-contexts": 7.0.0-rc.2 + "@rocket.chat/ui-avatar": 3.0.0 + "@rocket.chat/ui-contexts": 7.0.0 react: ^17.0.2 react-dom: ^17.0.2 languageName: unknown @@ -10351,7 +10351,7 @@ __metadata: "@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 @@ -10426,7 +10426,7 @@ __metadata: peerDependencies: "@rocket.chat/layout": "*" "@rocket.chat/tools": 0.2.1 - "@rocket.chat/ui-contexts": 7.0.0-rc.2 + "@rocket.chat/ui-contexts": 7.0.0 "@tanstack/react-query": "*" react: "*" react-hook-form: "*"