From b25b29fe7ba3bc9fca8da7a6b10461437a3e4d2d Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 23 Nov 2023 11:59:17 +0000
Subject: [PATCH] fix(ui): code block styles (#5692)

**What**
- Improves the styling of CodeBlock prism theme
---
 .changeset/witty-waves-rhyme.md               |  5 ++
 .../src/components/code-block/code-block.tsx  | 48 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/witty-waves-rhyme.md

diff --git a/.changeset/witty-waves-rhyme.md b/.changeset/witty-waves-rhyme.md
new file mode 100644
index 0000000000..db4889d661
--- /dev/null
+++ b/.changeset/witty-waves-rhyme.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Update the styling of CodeBlock
diff --git a/packages/design-system/ui/src/components/code-block/code-block.tsx b/packages/design-system/ui/src/components/code-block/code-block.tsx
index b617159822..8371c15487 100644
--- a/packages/design-system/ui/src/components/code-block/code-block.tsx
+++ b/packages/design-system/ui/src/components/code-block/code-block.tsx
@@ -138,22 +138,62 @@ const Body = ({
             ...themes.palenight,
             plain: {
               color: "rgba(249, 250, 251, 1)",
-              backgroundColor: "#111827",
+              backgroundColor: "rgb(17,24,39)",
             },
             styles: [
+              ...themes.palenight.styles,
               {
                 types: ["keyword"],
                 style: {
-                  color: "var(--fg-on-color)",
+                  fontStyle: "normal",
+                  color: "rgb(187,160,255)",
+                },
+              },
+              {
+                types: ["punctuation", "operator"],
+                style: {
+                  fontStyle: "normal",
+                  color: "rgb(255,255,255)",
+                },
+              },
+              {
+                types: ["constant", "boolean"],
+                style: {
+                  fontStyle: "normal",
+                  color: "rgb(187,77,96)",
+                },
+              },
+              {
+                types: ["function"],
+                style: {
+                  fontStyle: "normal",
+                  color: "rgb(27,198,242)",
+                },
+              },
+              {
+                types: ["number"],
+                style: {
+                  color: "rgb(247,208,25)",
                 },
               },
               {
                 types: ["maybe-class-name"],
                 style: {
-                  color: "rgb(255, 203, 107)",
+                  color: "rgb(255,203,107)",
+                },
+              },
+              {
+                types: ["string"],
+                style: {
+                  color: "rgb(73,209,110)",
+                },
+              },
+              {
+                types: ["comment"],
+                style: {
+                  color: "rgb(52,211,153)",
                 },
               },
-              ...themes.palenight.styles,
             ],
           }}
           code={active.code}