💄(frontend) use the same highlight color for cells and moves

Blocknote highlights the selected table cells with #c8c8ff66 and draws
the drop cursor of a moved block with #ddeeff: two different colors,
both out of the palette.

Use --c--contextuals--background--semantic--brand--tertiary for both, and
for the drop indicator of a moved table row or column which was #adf.
The cell overlay is blended with multiply because it is drawn on top of
the cell content while the token is opaque.

Signed-off-by: risk-alt <aldu6974@gmail.com>

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to
 ### Changed
 
 - ♿️(frontend) use semantic `<dl>` structure in document info card #2379
+- 💄(frontend) use the same highlight color for cells and moves #2575
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -196,6 +196,9 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         },
         showCursorLabels: showCursorLabels as 'always' | 'activity',
       },
+      dropCursor: {
+        color: 'var(--c--contextuals--background--semantic--brand--tertiary)',
+      },
       dictionary: {
         ...localesBN[langLocalesBN as keyof typeof localesBN],
         ...(localesBNMultiColumn && {

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -149,6 +149,19 @@ export const DocsEditorStyle = createGlobalStyle`
       color: var(--c--globals--colors--brand-700);
     }
 
+    /**
+    * Tables
+    */
+    .ProseMirror .selectedCell:after {
+      background: var(--c--contextuals--background--semantic--brand--tertiary);
+      mix-blend-mode: multiply;
+    }
+    .bn-table-drop-cursor, .ProseMirror .column-resize-handle {
+      background-color: var(
+        --c--contextuals--background--semantic--brand--tertiary
+      );
+    }
+
     /**
     * Divider
     */