Update rich editor style to be lighter and closer to printed doc

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/organizations/documents/description/DocumentDescriptionPage.tsx

@@ -124,6 +124,7 @@ export function DocumentDescriptionPage(props: { queryRef: PreloadedQuery<Docume
     <RichEditor
       className="flex-1"
       content={currentVersion.content}
+      data-theme="document"
       disabled={currentVersion.status !== "DRAFT"}
       onChangeContent={handleUpdate}
     />

packages/ui/src/Layouts/Layout.tsx

@@ -85,7 +85,7 @@ export function Layout({
               hasDrawer && "pr-105",
             )}
           >
-            <div className="py-12 px-8 max-w-[1200px] w-full mx-auto h-full">
+            <div className="py-12 px-8 max-w-[1200px] w-full mx-auto min-h-[calc(100vh-48px)]">
               {children}
             </div>
           </main>

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()}
     >
-      <PlusIcon size={16} weight="bold" />
+      <PlusIcon size={14} weight="bold" />
     </button>
   );
 }

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"],

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<HTMLButtonElement>) => {
     if (!hoveredBlock) return;
@@ -91,7 +91,7 @@ export function OptionsMenuTrigger({
       }}
       className={trigger()}
     >
-      <DotsSixVerticalIcon size={20} weight="bold" />
+      <DotsSixVerticalIcon size={16} weight="bold" />
     </button>
   );
 }

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"],

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 (
-    <div className={richEditorVariants({ className, disabled })}>
+    <div className={richEditorVariants({ className, disabled })} {...divProps}>
       {!disabled
         && (
           <>

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

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

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

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

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;

packages/ui/src/theme.css

@@ -171,8 +171,11 @@
         0px 2px 12px 0px rgba(0, 0, 0, 0.06);
 }
 
-@media (prefers-color-scheme: dark) {
+@custom-variant document (&:where([data-theme=document] *));
-    :root {
+
+@layer theme {
+    :root, :host {
+        @variant dark {
             --color-level-0: #151715;
             --color-level-1: #1a1d19;
             --color-level-2: #20241f;
@@ -245,6 +248,36 @@
             --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;
+        }
+    }
 }
 
 a:focus-visible,