fix(fuselage): remove codeBlock palette and add palette prop (#1383)

RocketChat · May 24, 2024 · 5870a93 · 5870a93
1 parent f2aa3f0
commit 5870a93
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 84 deletions.
diff --git a/.changeset/curvy-rules-jog.md b/.changeset/curvy-rules-jog.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): remove `codeBlock` palette and add `palette` prop for a custom palette
diff --git a/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.tsx b/packages/fuselage/src/components/PaletteStyleTag/PaletteStyleTag.tsx
@@ -3,7 +3,6 @@ import { createPortal } from 'react-dom';
 
 import { convertToCss } from './helpers/convertToCss';
 import { useCreateStyleContainer } from './hooks/useCreateStyleContainer';
-import { codeBlock } from './lib/codeBlockStyles';
 import { dark, highContrast, light } from './lib/themePalettes';
 import type { Themes } from './types/themes';
 
@@ -18,6 +17,7 @@ export const PaletteStyleTag = memo(function PaletteStyleTag({
   tagId = 'main-palette',
   prefix = '--rcx-color',
   selector,
+  palette,
 }: {
   theme?: Themes;
   /**
@@ -32,17 +32,14 @@ export const PaletteStyleTag = memo(function PaletteStyleTag({
    * Default is `:root`.
    */
   selector?: string;
+  /**
+   * CSS containing custom palette styles to be used.
+   */
+  palette?: string;
 }) {
-  const palette = convertToCss(themes[theme], prefix, selector);
+  const themePalette = palette || convertToCss(themes[theme], prefix, selector);
 
-  return (
-    <>
-      {createPortal(
-        theme === 'dark' ? palette + codeBlock : palette,
-        useCreateStyleContainer(tagId)
-      )}
-    </>
-  );
+  return <>{createPortal(themePalette, useCreateStyleContainer(tagId))}</>;
 });
 
 export default PaletteStyleTag;
diff --git a/packages/fuselage/src/components/PaletteStyleTag/lib/codeBlockStyles.ts b/packages/fuselage/src/components/PaletteStyleTag/lib/codeBlockStyles.ts