Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-25 16:19:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-12-22 16:37:44 +05:30
committed by GitHub
parent 72883e76a5
commit 8a0b710a62
6 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/src/core/extensions/callout/block.tsx
View File

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

2
packages/editor/src/core/extensions/code-inline/index.tsx
View File

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

4
packages/editor/src/core/extensions/code/code-block-node-view.tsx
View File

@@ -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>

6
packages/editor/src/core/extensions/custom-image/components/uploader.tsx
View File

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

2
packages/editor/src/styles/table.css
View File

@@ -86,7 +86,7 @@
tr[background="none"],
tr:not([background]) {
th {
@apply bg-layer-2;
@apply bg-layer-3;
}
}

2
packages/tailwind-config/variables.css
View File

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