[WEB-5774] fix: editor nodes background colors (#8416)

Author: aaryan610

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,
       }}

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",
       },
     };

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>

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,

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;
       }
     }
 

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);