From 8a0b710a62efab32efbee173e1d1951e15ac115f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 22 Dec 2025 16:37:44 +0530
Subject: [PATCH] [WEB-5774] fix: editor nodes background colors (#8416)

---
 packages/editor/src/core/extensions/callout/block.tsx       | 2 +-
 packages/editor/src/core/extensions/code-inline/index.tsx   | 2 +-
 .../src/core/extensions/code/code-block-node-view.tsx       | 4 ++--
 .../core/extensions/custom-image/components/uploader.tsx    | 6 +++---
 packages/editor/src/styles/table.css                        | 2 +-
 packages/tailwind-config/variables.css                      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/core/extensions/callout/block.tsx b/packages/editor/src/core/extensions/callout/block.tsx
index f5a156d90..e1ad8ca1b 100644
--- a/packages/editor/src/core/extensions/callout/block.tsx
+++ b/packages/editor/src/core/extensions/callout/block.tsx
@@ -29,7 +29,7 @@ export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
 
   return (
     <NodeViewWrapper
-      className="editor-callout-component group/callout-node relative bg-layer-2 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
+      className="editor-callout-component group/callout-node relative bg-layer-3 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
       style={{
         backgroundColor: activeBackgroundColor,
       }}
diff --git a/packages/editor/src/core/extensions/code-inline/index.tsx b/packages/editor/src/core/extensions/code-inline/index.tsx
index 6a5a0d290..0de3545fd 100644
--- a/packages/editor/src/core/extensions/code-inline/index.tsx
+++ b/packages/editor/src/core/extensions/code-inline/index.tsx
@@ -35,7 +35,7 @@ export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
     return {
       HTMLAttributes: {
         class:
-          "rounded-sm bg-layer-2 px-[6px] py-[1.5px] font-code font-medium text-(--extended-color-orange-600) border-[0.5px] border-subtle",
+          "rounded-sm bg-layer-3 px-[6px] py-[1.5px] font-code font-medium text-(--extended-color-orange-600) border-[0.5px] border-subtle",
         spellcheck: "false",
       },
     };
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 03d33f44b..2d4cbe95d 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -38,7 +38,7 @@ export function CodeBlockComponent({ node }: Props) {
         <button
           type="button"
           className={cn(
-            "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-2 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
+            "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
             {
               "bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied,
             }
@@ -53,7 +53,7 @@ export function CodeBlockComponent({ node }: Props) {
         </button>
       </Tooltip>
 
-      <pre className="bg-layer-2 text-primary rounded-lg p-4 my-2">
+      <pre className="bg-layer-3 text-primary rounded-lg p-4 my-2">
         <NodeViewContent as="code" className="whitespace-pre-wrap" />
       </pre>
     </NodeViewWrapper>
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index 353a76cbc..273121944 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -205,11 +205,11 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-2 border border-dashed transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-3 border border-dashed transition-all duration-200 ease-in-out cursor-default",
         {
           "border-subtle": !(selected && editor.isEditable && !isErrorState),
-          "hover:text-secondary hover:bg-layer-2-hover cursor-pointer": editor.isEditable && !isErrorState,
-          "bg-layer-2-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
+          "hover:text-secondary hover:bg-layer-3-hover cursor-pointer": editor.isEditable && !isErrorState,
+          "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
           "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
             selected && editor.isEditable && !isErrorState,
           "text-red-500 cursor-default": isErrorState,
diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css
index 7e01da159..0e706f41f 100644
--- a/packages/editor/src/styles/table.css
+++ b/packages/editor/src/styles/table.css
@@ -86,7 +86,7 @@
     tr[background="none"],
     tr:not([background]) {
       th {
-        @apply bg-layer-2;
+        @apply bg-layer-3;
       }
     }
 
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
index d578e538c..3a6c9b06c 100644
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@@ -629,7 +629,7 @@
       --background-color-layer-2-active: var(--color-neutral-500);
       --background-color-layer-2-selected: var(--color-neutral-500);
       --background-color-layer-3: var(--color-neutral-400);
-      --background-color-layer-3-hover: var(---color-neutral-500);
+      --background-color-layer-3-hover: var(--color-neutral-500);
       --background-color-layer-3-active: var(--color-neutral-600);
       --background-color-layer-3-selected: var(--color-neutral-600);
       --background-color-layer-transparent: var(--color-alpha-black-0);