binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 ( return (
<NodeViewWrapper <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={{ style={{
backgroundColor: activeBackgroundColor, 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 { return {
HTMLAttributes: { HTMLAttributes: {
class: 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", 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 <button
type="button" type="button"
className={cn( 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, "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> </button>
</Tooltip> </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" /> <NodeViewContent as="code" className="whitespace-pre-wrap" />
</pre> </pre>
</NodeViewWrapper> </NodeViewWrapper>

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

@ -205,11 +205,11 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
return ( return (
<div <div
className={cn( 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), "border-subtle": !(selected && editor.isEditable && !isErrorState),
"hover:text-secondary hover:bg-layer-2-hover cursor-pointer": editor.isEditable && !isErrorState, "hover:text-secondary hover:bg-layer-3-hover cursor-pointer": editor.isEditable && !isErrorState,
"bg-layer-2-hover text-secondary": draggedInside && 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": "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
selected && editor.isEditable && !isErrorState, selected && editor.isEditable && !isErrorState,
"text-red-500 cursor-default": isErrorState, "text-red-500 cursor-default": isErrorState,

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

@ -86,7 +86,7 @@
tr[background="none"], tr[background="none"],
tr:not([background]) { tr:not([background]) {
th { 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-active: var(--color-neutral-500);
--background-color-layer-2-selected: 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: 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-active: var(--color-neutral-600);
--background-color-layer-3-selected: var(--color-neutral-600); --background-color-layer-3-selected: var(--color-neutral-600);
--background-color-layer-transparent: var(--color-alpha-black-0); --background-color-layer-transparent: var(--color-alpha-black-0);