From 5359fe9931c354a46eb216944ddae8248fb7f28c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Fri, 3 Apr 2026 16:40:35 +0400 Subject: [PATCH] Update rich editor style to be lighter and closer to printed doc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Émile Ré --- .../description/DocumentDescriptionPage.tsx | 1 + packages/ui/src/Layouts/Layout.tsx | 2 +- .../RichEditor/BlockMenu/BlockMenuTrigger.tsx | 4 +- .../ui/src/RichEditor/BlockMenu/variants.ts | 2 +- .../OptionsMenu/OptionsMenuTrigger.tsx | 4 +- .../ui/src/RichEditor/OptionsMenu/variants.ts | 2 +- packages/ui/src/RichEditor/RichEditor.tsx | 8 +- .../TableColumnMenuTrigger.tsx | 2 +- .../RichEditor/TableColumnMenu/variants.ts | 2 +- .../TableRowMenu/TableRowMenuTrigger.tsx | 2 +- .../src/RichEditor/TableRowMenu/variants.ts | 2 +- packages/ui/src/rich-editor.css | 4 +- packages/ui/src/theme.css | 167 +++++++++++------- 13 files changed, 118 insertions(+), 84 deletions(-) diff --git a/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx b/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx index 6202aa8d0..806a93ab4 100644 --- a/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx +++ b/apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx @@ -124,6 +124,7 @@ export function DocumentDescriptionPage(props: { queryRef: PreloadedQuery diff --git a/packages/ui/src/Layouts/Layout.tsx b/packages/ui/src/Layouts/Layout.tsx index 55d2037cc..641704f24 100644 --- a/packages/ui/src/Layouts/Layout.tsx +++ b/packages/ui/src/Layouts/Layout.tsx @@ -85,7 +85,7 @@ export function Layout({ hasDrawer && "pr-105", )} > -
+
{children}
diff --git a/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx b/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx index 4773800af..ff9cc8922 100644 --- a/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx +++ b/packages/ui/src/RichEditor/BlockMenu/BlockMenuTrigger.tsx @@ -19,7 +19,7 @@ type BlockMenuTriggerProps = { }; export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps) { - const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 40); + const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 32); const handleTriggerClick = () => { try { @@ -81,7 +81,7 @@ export function BlockMenuTrigger({ editor, hoveredBlock }: BlockMenuTriggerProps }} className={trigger()} > - + ); } diff --git a/packages/ui/src/RichEditor/BlockMenu/variants.ts b/packages/ui/src/RichEditor/BlockMenu/variants.ts index 174ea2353..a2171deb9 100644 --- a/packages/ui/src/RichEditor/BlockMenu/variants.ts +++ b/packages/ui/src/RichEditor/BlockMenu/variants.ts @@ -7,7 +7,7 @@ import { tv } from "tailwind-variants"; export const blockMenuVariants = tv({ slots: { trigger: [ - "z-20 flex size-6 items-center justify-center", + "z-20 flex size-5 items-center justify-center", "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary text-xl font-light cursor-pointer", ], menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"], diff --git a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx index 89fbcf56f..09c3db4e8 100644 --- a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx +++ b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx @@ -37,7 +37,7 @@ export function OptionsMenuTrigger({ menuRefs, getReferenceProps, }: OptionsMenuTriggerProps) { - const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 16); + const { triggerRefs, triggerStyles, isPositioned } = useBlockTrigger(hoveredBlock, 12); const onDragStart = (e: DragEvent) => { if (!hoveredBlock) return; @@ -91,7 +91,7 @@ export function OptionsMenuTrigger({ }} className={trigger()} > - + ); } diff --git a/packages/ui/src/RichEditor/OptionsMenu/variants.ts b/packages/ui/src/RichEditor/OptionsMenu/variants.ts index 2779ed683..6b999ee3b 100644 --- a/packages/ui/src/RichEditor/OptionsMenu/variants.ts +++ b/packages/ui/src/RichEditor/OptionsMenu/variants.ts @@ -7,7 +7,7 @@ import { tv } from "tailwind-variants"; export const optionsMenuVariants = tv({ slots: { trigger: [ - "z-20 flex size-6 items-center justify-center", + "z-20 flex size-5 items-center justify-center", "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab", ], menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"], diff --git a/packages/ui/src/RichEditor/RichEditor.tsx b/packages/ui/src/RichEditor/RichEditor.tsx index 1bea03df7..b61e0cbb0 100644 --- a/packages/ui/src/RichEditor/RichEditor.tsx +++ b/packages/ui/src/RichEditor/RichEditor.tsx @@ -67,10 +67,10 @@ const extensions = [ ]; const richEditorVariants = tv({ - base: ["relative flex-1 pb-14"], + base: ["relative flex-1 py-14 pr-8 bg-level-1 shadow-base"], variants: { disabled: { - true: "", + true: "pl-8", false: "pl-14", }, }, @@ -83,7 +83,7 @@ type RichEditorProps = ComponentProps<"div"> & { }; export function RichEditor(props: RichEditorProps) { - const { className, content, disabled = false, onChangeContent } = props; + const { className, content, disabled = false, onChangeContent, ...divProps } = props; const handleUpdate = useCallback( ({ editor }: { editor: Editor }) => { @@ -112,7 +112,7 @@ export function RichEditor(props: RichEditorProps) { if (!editor) return null; return ( -
+
{!disabled && ( <> diff --git a/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx b/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx index 78744e217..93137ae0c 100644 --- a/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx +++ b/packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx @@ -145,7 +145,7 @@ export function TableColumnMenuTrigger({ strategy: "fixed", placement: "top", middleware: [ - offset(6), + offset(4), size({ apply({ rects, elements }) { Object.assign(elements.floating.style, { diff --git a/packages/ui/src/RichEditor/TableColumnMenu/variants.ts b/packages/ui/src/RichEditor/TableColumnMenu/variants.ts index 9a584c54a..843fa8171 100644 --- a/packages/ui/src/RichEditor/TableColumnMenu/variants.ts +++ b/packages/ui/src/RichEditor/TableColumnMenu/variants.ts @@ -9,7 +9,7 @@ export const tableColumnMenuVariants = tv({ trigger: [ "z-20 flex items-center justify-center", "rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab", - "py-0.5 h-3", + "py-0.5 h-2", ], menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"], }, diff --git a/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx b/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx index ade34157c..769817268 100644 --- a/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx +++ b/packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx @@ -145,7 +145,7 @@ export function TableRowMenuTrigger({ strategy: "fixed", placement: "left", middleware: [ - offset(6), + offset(4), size({ apply({ rects, elements }) { Object.assign(elements.floating.style, { diff --git a/packages/ui/src/RichEditor/TableRowMenu/variants.ts b/packages/ui/src/RichEditor/TableRowMenu/variants.ts index 76161f50c..dda1342cb 100644 --- a/packages/ui/src/RichEditor/TableRowMenu/variants.ts +++ b/packages/ui/src/RichEditor/TableRowMenu/variants.ts @@ -9,7 +9,7 @@ export const tableRowMenuVariants = tv({ trigger: [ "z-20 flex flex-col items-center justify-center", "rounded text-txt-tertiary bg-subtle hover:bg-border-solid cursor-grab", - "px-0.5 w-3", + "px-0.5 w-2", ], menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"], }, diff --git a/packages/ui/src/rich-editor.css b/packages/ui/src/rich-editor.css index 4a6dc19d4..d73cf0109 100644 --- a/packages/ui/src/rich-editor.css +++ b/packages/ui/src/rich-editor.css @@ -6,7 +6,7 @@ .tiptap { p { - @apply my-2 min-w-0.5; + @apply my-2 min-w-0.5 font-light text-sm; code { @apply py-0.5 px-1; } } @@ -68,7 +68,7 @@ } th { @apply px-2 py-1.5 border border-border-mid border-collapse bg-subtle text-left font-semibold relative; - p { @apply m-0; } + p { @apply m-0 font-medium; } } td { @apply px-2 py-1.5 border border-border-mid border-collapse bg-level-0 text-left relative; diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css index f38607090..03e8d90f9 100644 --- a/packages/ui/src/theme.css +++ b/packages/ui/src/theme.css @@ -171,79 +171,112 @@ 0px 2px 12px 0px rgba(0, 0, 0, 0.06); } -@media (prefers-color-scheme: dark) { - :root { - --color-level-0: #151715; - --color-level-1: #1a1d19; - --color-level-2: #20241f; - --color-level-3: #3b3f3a; +@custom-variant document (&:where([data-theme=document] *)); - --color-black: #ffffff; +@layer theme { + :root, :host { + @variant dark { + --color-level-0: #151715; + --color-level-1: #1a1d19; + --color-level-2: #20241f; + --color-level-3: #3b3f3a; - /* Text colors */ - --color-txt-primary: #eceeec; - --color-invert: #151715; - --color-txt-invert: #fcfdfc; - --color-txt-secondary: #9aa299; - --color-txt-tertiary: #778175; - --color-txt-quaternary: #4c514b; - --color-txt-disabled: #3b3f3a; - --color-txt-accent: #c4f042; - --color-txt-danger: #ff6369; - --color-txt-success: rgba(181, 255, 44, 0.72); - --color-txt-info: #52a9ff; - --color-txt-warning: #f1a10d; + --color-black: #ffffff; - /* Backgrounds */ - --color-primary: #c4f042; - --color-invert: #151715; - --color-secondary: rgba(214, 251, 196, 0.06); - --color-tertiary: rgba(255, 255, 255, 0); - --color-subtle: rgba(213, 254, 175, 0.03); - --color-highlight: rgba(214, 251, 196, 0.06); - --color-active: rgba(239, 254, 226, 0.08); - --color-accent: #c4f042; - --color-danger: rgba(254, 58, 61, 0.13); - --color-danger-plain: rgba(254, 58, 61, 0.13); - --color-danger-dark: rgba(255, 89, 95, 0.94); - --color-success: rgba(184, 253, 106, 0.06); - --color-info: rgba(22, 119, 254, 0.14); - --color-warning: rgba(254, 115, 0, 0.09); - --color-dialog: #151715; + /* Text colors */ + --color-txt-primary: #eceeec; + --color-invert: #151715; + --color-txt-invert: #fcfdfc; + --color-txt-secondary: #9aa299; + --color-txt-tertiary: #778175; + --color-txt-quaternary: #4c514b; + --color-txt-disabled: #3b3f3a; + --color-txt-accent: #c4f042; + --color-txt-danger: #ff6369; + --color-txt-success: rgba(181, 255, 44, 0.72); + --color-txt-info: #52a9ff; + --color-txt-warning: #f1a10d; - /* Borders */ - --color-border-solid: rgba(239, 254, 226, 0.08); - --color-border-low: rgba(239, 254, 226, 0.08); - --color-border-mid: rgba(233, 254, 223, 0.1); - --color-border-strong: rgba(241, 255, 237, 0.25); - --color-border-active: rgba(253, 255, 253, 0.93); - --color-border-accent: #c4f042; - --color-border-danger: #f2555a; - --color-border-success: #c4f042; - --color-border-warning: #ffcb47; - --color-border-info: #369eff; + /* Backgrounds */ + --color-primary: #c4f042; + --color-invert: #151715; + --color-secondary: rgba(214, 251, 196, 0.06); + --color-tertiary: rgba(255, 255, 255, 0); + --color-subtle: rgba(213, 254, 175, 0.03); + --color-highlight: rgba(214, 251, 196, 0.06); + --color-active: rgba(239, 254, 226, 0.08); + --color-accent: #c4f042; + --color-danger: rgba(254, 58, 61, 0.13); + --color-danger-plain: rgba(254, 58, 61, 0.13); + --color-danger-dark: rgba(255, 89, 95, 0.94); + --color-success: rgba(184, 253, 106, 0.06); + --color-info: rgba(22, 119, 254, 0.14); + --color-warning: rgba(254, 115, 0, 0.09); + --color-dialog: #151715; - /* Hover */ - --color-primary-hover: rgba(196, 240, 66, 0.88); - --color-invert-hover: #1a1d19; - --color-secondary-hover: rgba(214, 251, 196, 0.06); - --color-tertiary-hover: rgba(213, 254, 175, 0.03); - --color-subtle-hover: rgba(214, 251, 196, 0.06); - --color-highlight-hover: rgba(233, 254, 223, 0.1); - --color-accent-hover: rgba(183, 255, 50, 0.82); - --color-active-hover: rgba(233, 254, 223, 0.1); - --color-danger-hover: rgba(254, 58, 61, 0.7); + /* Borders */ + --color-border-solid: rgba(239, 254, 226, 0.08); + --color-border-low: rgba(239, 254, 226, 0.08); + --color-border-mid: rgba(233, 254, 223, 0.1); + --color-border-strong: rgba(241, 255, 237, 0.25); + --color-border-active: rgba(253, 255, 253, 0.93); + --color-border-accent: #c4f042; + --color-border-danger: #f2555a; + --color-border-success: #c4f042; + --color-border-warning: #ffcb47; + --color-border-info: #369eff; - /* Pressed */ - --color-primary-pressed: rgba(196, 240, 66, 0.84); - --color-invert-pressed: #20241f; - --color-secondary-pressed: rgba(239, 254, 226, 0.08); - --color-tertiary-pressed: rgba(214, 251, 196, 0.06); - --color-subtle-pressed: rgba(239, 254, 226, 0.08); - --color-highlight-pressed: rgba(236, 254, 229, 0.13); - --color-accent-pressed: rgba(209, 255, 70, 0.94); - --color-active-pressed: rgba(236, 254, 229, 0.13); - --color-danger-pressed: rgba(254, 58, 61, 0.5); + /* Hover */ + --color-primary-hover: rgba(196, 240, 66, 0.88); + --color-invert-hover: #1a1d19; + --color-secondary-hover: rgba(214, 251, 196, 0.06); + --color-tertiary-hover: rgba(213, 254, 175, 0.03); + --color-subtle-hover: rgba(214, 251, 196, 0.06); + --color-highlight-hover: rgba(233, 254, 223, 0.1); + --color-accent-hover: rgba(183, 255, 50, 0.82); + --color-active-hover: rgba(233, 254, 223, 0.1); + --color-danger-hover: rgba(254, 58, 61, 0.7); + + /* Pressed */ + --color-primary-pressed: rgba(196, 240, 66, 0.84); + --color-invert-pressed: #20241f; + --color-secondary-pressed: rgba(239, 254, 226, 0.08); + --color-tertiary-pressed: rgba(214, 251, 196, 0.06); + --color-subtle-pressed: rgba(239, 254, 226, 0.08); + --color-highlight-pressed: rgba(236, 254, 229, 0.13); + --color-accent-pressed: rgba(209, 255, 70, 0.94); + --color-active-pressed: rgba(236, 254, 229, 0.13); + --color-danger-pressed: rgba(254, 58, 61, 0.5); + } + } + + * { + @variant document { + --text-4xl: 16pt; + --text-4xl--line-height: 21pt; + --text-4xl--letter-spacing: -0.6px; + --text-3xl: 15pt; + --text-3xl--line-height: 21pt; + --text-3xl--letter-spacing: -0.4px; + --text-2xl: 14pt; + --text-2xl--line-height: 21pt; + --text-2xl--letter-spacing: 0; + --text-xl: 13pt; + --text-xl--line-height: 18pt; + --text-xl--letter-spacing: 0; + --text-lg: 12pt; + --text-lg--line-height: 18pt; + --text-lg--letter-spacing: 0; + --text-base: 11pt; + --text-base--line-height: 18pt; + --text-base--letter-spacing: 0; + --text-sm: 10pt; + --text-sm--line-height: 15pt; + --text-sm--letter-spacing: 0; + --text-xs: 9pt; + --text-xs--line-height: 15pt; + --text-xs--letter-spacing: 0; + } } }